如何在点击时使用jQuery添加标题子菜单？

Question

在我的页面标题中有6个类别的列表，我想为每个类别添加一个子菜单，但只有在单击类别时才显示它。 （我想只使用一个处理器在我的script.js文件，而不是增加一个特别每个类别 - 更少的代码。）

这里是我的名单中头HTML：

<ul id="menu"> 
    <li id="menu_item1" class="menu_item">About 
    <div id="sub-menu1" class=“sub-menu”></div> 
    </li> 
    <li id="menu_item2" class="menu_item">Services 
    <div id="sub-menu2" class=“sub-menu”></div> 
    </li> 
    <li id="menu_item3" class="menu_item">Portfolio 
    <div id="sub-menu3" class=“sub-menu”></div> 
    </li> 
    <li id="menu_item4" class="menu_item">Blog 
    <div id="sub-menu4" class=“sub-menu”></div> 
    </li> 
    <li id="menu_item5" class="menu_item">Pictures 
    <div id="sub-menu5" class=“sub-menu”></div> 
    </li> 
    <li id="menu_item6" class="menu_item">Contacts 
    <div id="sub-menu6" class=“sub-menu”></div> 
    </li> 
</ul> 

这是SCSS：

#menu { 
    position: absolute; 
    right: 25px; 
    top: 25px; 

    .menu_item { 
     position:relative; 
     font-family: $OpenSansSemibold; 
     font-size: 14px; 
     color: #fff; 
     text-transform: uppercase; 
     list-style-type: none; 
     display: inline-block; 
     padding: 8px 16px; 

    div.sub-menu { 
     position:absolute; 
     top:40px; 
     left: 0; 
     width: 200px; 
     height: 116px; 
     border: 1px solid green; 
     background-image: url(../img/popupmenu_03.png); 
     display: none; 
    } 


    &:hover{ 
     background: #62a29e; 
     border-radius: 5px; 
     border-bottom: 5px solid #528b86; 
     cursor: pointer; 

    } 
    } 
} 

这里是我的尝试，到目前为止，但它不工作：

$(".menu_item").each(function() { 
    $(this).children().find(".sub-menu").toggle(); 
}); 

任何帮助竟被d非常感谢，谢谢！

Answer 1

只要删除.children（），它应该工作。 .children（）已经访问了直接子对象，而.find（）将从该元素向下遍历DOM树。因此，在您的代码中，您正在寻找被点击的.menu_item的直接子项的任何子项（孙子等）。 .sub-menu不是.menu_item的直接子节点的子节点，但它已经是那个元素了;）我在这里使用.find（）方法，因为即使DOM发生变化，它仍然可以工作。如果你不改变菜单的DOM结构，你可以安全地使用$（this）.children（）。toggle（）;

var $subMenus = $(".menu_item").find(".sub-menu"); 
$(".menu_item").on("click", function() { 
    $subMenus.addClass("hidden"); 
    $(this).find(".sub-menu").removeClass("hidden"); 
}); 

SCSS：

#menu { 

    .menu_item { 

    div.sub-menu { 
     .... 
     &.hidden { 
      display: none; 
     } 
    } 
    } 
} 

Answer 2

请试试这个：

jQuery(".menu_item").click(function(e) { 
 
    jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus 
 
    jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu 
 
});

#menu { 
 
    position: absolute; 
 
    right: 25px; 
 
    top: 25px; 
 
} 
 
#menu .menu_item { 
 
    position: relative; 
 
    font-family: 'OpenSansSemibold'; 
 
    font-size: 14px; 
 
    color: #333; /*fff; changed just for display */ 
 
    text-transform: uppercase; 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    padding: 8px 16px; 
 
} 
 
#menu .menu_item div.sub-menu { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 116px; 
 
    border: 1px solid green; 
 
    background-image: url(../img/popupmenu_03.png); 
 
    display: none; 
 
} 
 
#menu .menu_item:hover { 
 
    background: #62a29e; 
 
    border-radius: 5px; 
 
    border-bottom: 5px solid #528b86; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
    <li id="menu_item1" class="menu_item">About 
 
    <div id="sub-menu1" class="sub-menu"></div> 
 
    </li> 
 
    <li id="menu_item2" class="menu_item">Services 
 
    <div id="sub-menu2" class="sub-menu"></div> 
 
    </li> 
 
    <li id="menu_item3" class="menu_item">Portfolio 
 
    <div id="sub-menu3" class="sub-menu"></div> 
 
    </li> 
 
    <li id="menu_item4" class="menu_item">Blog 
 
    <div id="sub-menu4" class="sub-menu"></div> 
 
    </li> 
 
    <li id="menu_item5" class="menu_item">Pictures 
 
    <div id="sub-menu5" class="sub-menu"></div> 
 
    </li> 
 
    <li id="menu_item6" class="menu_item">Contacts 
 
    <div id="sub-menu6" class="sub-menu"></div> 
 
    </li> 
 
</ul>