李并不里面UL

显示我有菜单，里面里，还有另外一个UL，对UL显示的李点击时。但这个jQuery不工作。

$(document).ready(function() { 
    $("#side-nav .sub-menu").click(function() { 
    //slide up all the link lists 
    $("#side-nav ul ul").slideUp(); 
    //slide down the link list below the h3 clicked - only if its closed 
    if (!$(this).next().is(":visible")) { 
     $(this).next().slideDown(); 
    } 
    }) 
})

HTML

<div id="side-nav"> 
    <ul> 
    <li style="border-top: thin #eee solid;" class="sub-menu"> 
     <i class="fa fa-upload fa-lg"></i>Upload 
     <ul> 
     <li><a href="#">Link1</a> 
     </li> 
     <li><a href="#">Link2</a> 
     </li> 
     <li><a href="#">Link3</a> 
     </li> 
     </ul> 
    </li> 
    <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a> 
    </li> 

    </ul> 
</div>

CSS

#side-nav ul ul { 
display: none; 
    } 
    #side-nav li.active ul { 
display: block; 
    }

来源

2014-02-20 neel

我做了一个轻微的调整你的代码，但其他东西使用的jsfiddle和你使用jQuery是包括jQuery框架库时要记住。

$(document).ready(function() { 
$("#side-nav .sub-menu").click(function() { 
    // if secondary nav is not visible, slide down 
    if (!$('> ul', this).is(":visible")) { 
     $('> ul', this).slideDown(); 
    } else { // else, it is visible so slide up 
     $('> ul', this).slideUp(); 
    } 
}) 
})

来源

2014-02-20 05:44:58 partypete25

尝试

<div id="side-nav"> 
    <ul> 
     <li style="border-top: thin #eee solid;" class="sub-menu"> 
      <!--Use a another wrapper element for the tirgger part--> 
      <span><i class="fa fa-upload fa-lg"></i>Upload</span> 
      <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
      </ul> 
     </li> 
     <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a></li> 
    </ul> 
</div>

然后

$(document).ready(function() { 
    $("#side-nav .sub-menu > span").click(function() { 
     //slide down the target 
     var $nxt = $(this).next().stop(true).slideDown(); 
     //slide up all other elements 
     $("#side-nav ul ul").not($nxt).stop(true).slideUp(); 
    }) 
})

演示：Fiddle

来源

2014-02-20 05:40:15

Johny：谢谢。但滑动不起作用 – neel

@Parvathiiiii而不是'.slideDown（）;'使用'.slideToggle（）;' - http://jsfiddle.net/arunpjohny/C4MMA/2/ –

只需更换

$("#side-nav ul ul").slideUp();

通过

$("#side-nav ul ul").slideToggle("slow");

这里是demo

来源

2014-02-20 05:45:17 iJade

再次单击李ul不是隐藏 – neel

@Parvathiiiii更新..有一个看看 – iJade

你试试这个jQuery的代码 -

$(document).ready(function() { 
    $("#side-nav .sub-menu").click(function() { 
     $("#side-nav ul ul").toggle('slow'); 
     }) 
    })

来源

2014-02-20 05:50:32 Preet

回答

相关问题