Question

以下是我要做的事情。我使用Accordion w / Jquery。在页面上，我有多个隐藏的产品，我正在搜索一个工具，只需点击一下即可展开所有div。我读到maccordion会有所帮助，但我没有看到一个例子或者知道如何很好地导航帮助文档来实现这一点。

<div class="maccordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>

    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>

    <h3><a href="#">Third header</a></h3>
    <div>Third content</div>
</div>


<script type="text/javascript">
    $(function(){


        $( ".maccordion" ).maccordion( { active: false } );

        $( ".maccordion" ).maccordion( "option", "active", [-1] );

    });
</script>

我想要做的是点击第一个标题并进行第二次和第三次展开。第一个标题只是＆＃34;点击此处展开全部＆＃34;选项。

你知道如何使用maccordion吗？我会在脚本函数中添加什么内容？

我找到了另一个效果很好的脚本，多手风琴开放，但我使用的是JQuery 1.8.3和JQuery UI 1.10，这些版本不支持。

感谢

Answer 1

根据我的描述，您实际上并未寻找手风琴功能。要一起切换一组内容，您可以组合一些自定义CSS和jQuery，如下所示：

＆＃13;

$("#toggleAll").click(function(){
  $(".maccordion").find("h3+div").slideToggle();
});

＆＃13;

h3 + div{
  display:none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="toggleAll">Expand All</a>
<div class="maccordion">
  <h3><a href="#">First header</a></h3>
  <div>First content</div>

  <h3><a href="#">Second header</a></h3>
  <div>Second content</div>

  <h3><a href="#">Third header</a></h3>
  <div>Third content</div>
</div>

＆＃13;

但是，如果你必须使用jquery-ui手风琴，那么你可能会找到有用的答案here

maccordion，如何用点击扩展多个div？

1 个答案: