0

我想使用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> 手风琴关闭。（见这个小提琴：http: //jsfiddle.net/8F9YC/）。
为什么？我该如何解决这个问题？

任何帮助表示赞赏。谢谢你。

4

2 回答 2

1

问题是，在这个插件中，点击事件是为手风琴 li 元素处理的 - 以及其中的所有内容。它们阻止仅单击该元素内的 div（请参见此处的第 487 行）。

您还可以在 div 中为您的 lis 禁用点击事件

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

查看更新的 jsfiddle

于 2013-07-18T11:37:11.317 回答
1

如果你在这里查看源代码，你会发现问题出在这条指令上：

... 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>

那应该工作！

再见

于 2013-07-18T11:29:19.710 回答