单击li列表未触发任何事件

Question

Can you please take a look at this demo and let me know why click on list is not firing any function to page?

<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

Style:

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

}
li{
      background-color:#2d2d2d;

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

Script:

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

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

Thanks 1

Answer 1

i Think this is what you are trying to do http://jsfiddle.net/f27bp/11/ Use prevent default at the end of the function and use jquery.children to apply the function on children.

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

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

});