Question

请你看看this demo，让我知道为什么点击列表没有触发任何页面功能？

<ul id="slider">
    <li class="expandOnClick">
        <a  href="#">One</a>
    </li>
    <li class="expandOnClick">
        <a href="#">Two</a>
        <ul class="musthidden">
            <li><a class="prevent" href="#">Two _ 1</a></li>
            <li><a class="prevent" href="#">Two _ 2</a></li>
            <li><a class="prevent" href="#">Two _ 3</a></li>
            <li><a class="prevent" href="#">Two _ 4</a></li>
        </ul>
    </li>
    <li class="expandOnClick">
        <a  href="#">Three</a>
        <ul class="musthidden">
            <li><a class="prevent" href="#">Three _ 1</a></li>
            <li><a class="prevent" href="#">Three _ 2</a></li>
            <li><a class="prevent" href="#">Three _ 3</a></li>
            <li><a class="prevent" href="#">Three _ 4</a></li>
        </ul>
    </li>
    <li class="expandOnClick">
        <a  href="#">Four</a>
    </li>
</ul

风格：

.musthidden {
    display:none;
}
ul
{
list-style-type:none;

}
li{
      background-color:#2d2d2d;

}
li:hover{
     background-color:#ccc;
}

脚本：

$(".expandOnClick").click(function (e) {

     e.preventDefault();
     $(".musthidden").slideUp();
     $(this).parent("li").each(function () {
         if ($('.musthidden', this).css('display') == 'none') {
             $(".musthidden", this).slideDown();
         }
     });
 });

由于 1

Answer 1

我认为这是你要做的事情http://jsfiddle.net/f27bp/11/在函数末尾使用prevent default，并使用jquery.children将函数应用于子函数。

$(".expandOnClick").click(function (e) {

 $(this).siblings().children(".musthidden").slideUp();
$(this).children(".musthidden").slideDown();
 e.preventDefault();

}）;

点击li列表不会触发任何事件

1 个答案: