Question

我花了最后几个小时试图找到解决方案，但我找不到任何解决方案。我使用Accordion | jQuery UI作为列表。在列表中，有些项目需要展开以显示更多内容，其他项目应该只是文本。

看起来如果我打破建议的结构，手风琴根本不起作用。

此时，我不得不添加空的div，以便它不会中断，但我最终得到了扩展的标题，没有要显示的内容。

有没有办法保持不需要扩展的标题和他们一起做的标题，而不会一切都崩溃？

这是我的HTML：

<div id="accordion" class="col-xs-12">         
       <h3>Header</h3><div></div>
       <h3>Header</h3><div></div>
       <h3><i class="fa fa-check"></i>Header 3</h3><div><ul id="googlelist">
             <li>Item 1</li>
             <li>Item 2</li>
             <li>Item 3</li>
             <li>Item 4</li>
           </ul>
           </div>             
       <h3>Header</h3><div></div>
       <h3>Header</h3>
         <div>
            <ul id="googlelist">
             <li>Item1</li>
             <li>Item 2</li>
           </ul>
          </div>
       <h3>Header</h3>
          <div><ul id="googlelist">
             <li>Item 1</li>
             <li>Item 2</li>
             <li>Item 3</li>
           </ul></div>
       </div>

Answer 1

如果我正确理解您的要求，您可以使用自定义点击处理程序（如

）来使用hack

<div id="accordion" class="col-xs-12">         
    <h3 class="none">Header</h3><div></div>
    <h3 class="none">Header</h3><div></div>
    <h3><i class="fa fa-check"></i>Header 3</h3><div><ul id="googlelist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>
    </div>             
    <h3>Header</h3><div></div>
    <h3>Header</h3>
    <div>
        <ul id="googlelist">
            <li>Item1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <h3>Header</h3>
    <div><ul id="googlelist">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul></div>
</div>

然后

$('#accordion h3.none').click(function (e) {
    e.stopImmediatePropagation();
})
$('#accordion').accordion({
    collapsible: true,
    active: false
});

演示：Fiddle

我可以使用Accordion进行可扩展和不可扩展的元素吗？

1 个答案: