Question

我想使用 awsAccordion.js 创建一个手风琴，并在手风琴中插入列表。
这是一个例子，我在第一个<li>：

中有一个列表

<div id="accordion1">
    <ul>
        <li>
            <h1>Heading 1</h1>
            <div>
               <span>
                Phasellus eget libero elit, a sodales felis. 
                Morbi ligula tellus, posuere nec interdum ac, blandit et ante. 
                Morbi nibh orci, eleifend vitae venenatis non, molestie in magna.
                </span>
                <ul>    
                    <li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                </ul>
            </div>
        </li>
        <li>
            <h1>Heading 2</h1>
            <div>
                <span>
                   Phasellus eget libero elit, a sodales felis. Morbi ligula tellus.
                   Morbi ligula tellus, posuere nec interdum ac, blandit et ante
                </span>
            </div>
        </li>
    </ul>
</div>

问题在于，当我点击列表时，示例：<li>list 1</li＆gt;手风琴关闭了。（见这个小提琴：http://jsfiddle.net/8F9YC/）为什么？我怎么能解决这个问题？

感谢任何帮助。谢谢。

Answer 1

如果你看一下源代码here，你会发现问题就在于这个指令：

... parent().find('li') ...

您可以使用

替换来源中的说明

... parent().find('.myli') ...

然后在你的HTML代码中使用它：

<div id="accordion1">
    <ul>
        <li class="myli">
            <h1>Heading 1</h1>
            <div>
               <span>
                Phasellus eget libero elit, a sodales felis. 
                Morbi ligula tellus, posuere nec interdum ac, blandit et ante. 
                Morbi nibh orci, eleifend vitae venenatis non, molestie in magna.
                </span>
                <ul>    
                    <li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                </ul>
            </div>
        </li>
        <li class="myli">
            <h1>Heading 2</h1>
            <div>
                <span>
                   Phasellus eget libero elit, a sodales felis. Morbi ligula tellus.
                   Morbi ligula tellus, posuere nec interdum ac, blandit et ante
                </span>
            </div>
        </li>
    </ul>
</div>

这应该有用！

再见

Answer 2

问题在于，在此插件中，clickal事件是针对accordion li元素及其内部的所有内容处理的。它们只阻止单击该元素内的div（参见第487行here）。

您还可以禁用

中的lis里面的点击事件

$("#accordion1").find('div ul li').on("click", function(){
    return false;
});

查看更新的jsfiddle

如何在aws手风琴列表中添加列表？

2 个答案: