Question

如何隐藏子菜单，点击链接后再次显示子菜单......

我尝试自己编写代码但不起作用

我只是想创建一个简单的菜单，我该怎么做？

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<li class="Item1">
     <a href="#" >Separador 1</a>
</li>
<ul class="submenu">
     <li class="menuitem">
         <a href="#"> Submenu 1 </a>
     </li>
</ul>

<style>
li{
   float:left;
   display:inline;
   margin-left: 10px;
}
</style>
<script>
$('.item1 a').click(function() {
      $(this).children('.menuitem').toggle();
});
</script>

Answer 1

尝试

// `I` capital
$('.Item1 a').click(function() {
    //the submenu is the child of the next li of current li
    $(this).parent().next().children('.menuitem').toggle();
});

演示：Fiddle

Answer 2

为了让你的jQuery工作，你需要让你的子菜单成为li元素的子元素：

<li class="Item1"><a href="#" >Separador 1</a>

    <ul class="submenu">
        <li class="menuitem"><a href="#"> Submenu 1 </a></li>
    </ul>
</li>

然后稍微修改JS：

$('.Item1').click(function() {

    $(this).children('.submenu').find('.menuitem').toggle();

});

在此处查看此行动：http://jsfiddle.net/nD4u8/

您可以使用代码获得相同的结果，但需要稍微修改选择器。我给你的是一个更标准的方法。

Answer 3

您也可以尝试使用.closest()

$('.Item1 a').click(function() {
      $(this).closest('li').next().children().toggle();
});

注意：您提供了.item1班级名称，因为标记包含.Item1，其中我是资本，因此请务必确保选择器为大小写敏感的

Demo

Answer 4

试试这个：

<a href='javascript:toggle()'>Expand/Collapse</a>
    <script>
        function toggle(){
        var div1 = document.getElementById('toggle')
        if (div1.style.display == 'none') {
        div1.style.display = 'block'
        } else {
        div1.style.display = 'none'
        }
        }
        </script>

<div id='toggle' style='display:none'>

Answer 5

$('.Item1 a').click(function() {
      $('.submenu li').toggle();
});

fiddle

Answer 6

$('.item1 a').click(function() {

      $(this).children('.menuitem').hide();

});

JQuery - 显示和隐藏菜单

6 个答案: