如何创建像jQuery Accordion这样的东西？

问题描述：

We need to create a FAQ page that has a requirement that clicking the title will open up the answer.

jQuery Accordion popped immediately to mind, and I have spent the last couple of days trying to get that to work with our code.

In short, it can't (at least, not easily) because migrating our version of jquery up from 1.7.1 causes a number of our other controls to break.

All of our controls load from a Template, like the one below:

<?php include(SITE_ROOT.'lib/templates/masterPage.php'); ?>

I could modify masterPage.php to use the latest jquery, but then we would need to stop all of our software department to spend the next few months regression testing. The company is not ready for that.

I have gotten Accordion to work with 1.8.3 and up (see fiddle, but we are locked into 1.7.1 for now.

Is there something else out there that I can use to create this effect besides the latest jQuery?

Is there anything in HTML5? I can use that.

我们需要创建一个FAQ页面，要求点击标题才能打开答案。 p >

jQuery手风琴立即浮出水面，我花了最后一对试图让它与我们的代码一起使用。 p>

简而言之，它不能（至少，不容易）因为从1.7.1迁移我们的jquery版本会导致要破坏的其他控件的数量。 p>

我们的所有控件都从模板加载，如下所示： p>

 ＆lt;？  php include（SITE_ROOT.'lib / templates / masterPage.php'）;  ？＆gt; 
  code>  pre> 
 
 我可以修改 masterPage.php  code>以使用最新的jquery，但是我们需要停止所有的软件 部门要花几个月的回归测试。 该公司尚未做好准备。 p> 
 
 
我已经让Accordion与1.8.3及更高版本一起工作（参见小提琴，但我们暂时被锁定在1.7.1。 p> 
 
 

还有其他东西我可以用它来创建这个 除了最新的jQuery之外的效果？ p> 
 
 
 HTML5中有什么内容吗？我可以使用它。 p> 
  div>

答

You can create an accordion with HTML 5 and CSS3 see http://www.expression-web-tutorial.com/accordion-menu-tutorial.html

答

You could try another accordion plugin, there 2 that are bundled with the two best frontend frameworks available

I believe foundation 4 may be compatible with your version of jQuery

http://foundation.zurb.com/develop/download-f4.html http://foundation.zurb.com/docs/components/accordion.html

Bootstrap should work too.

http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/ http://getbootstrap.com/2.3.2/javascript.html#collapse

^^^ This is an older version of bootstrap, the newest version might be compatible too. might be worth checking if you go down this route as you would want to be on the latest stable release really.

I prefer foundation by miles though

UPDATE

Foundation don't seem to mention that any specific version of jQuery is required and there seems to be people using zurb foundation 5 with jquery 1.1..... and you can just choose the accordion using the customise tab http://foundation.zurb.com/develop/download.html#customizeFoundation

答

This is a really nice accordion with just plain CSS3, though if you support IE lower than 9, it won't be useful, as it use pseudo classes.

http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

There's also this other one that I remember adapting to my needs on a project I made about a year ago.

http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3

Again, CSS3, IE will cause issues.

如何创建像jQuery Accordion这样的东西？

UPDATE

相关推荐