点击下拉菜单

Question

我正在创建一个下拉菜单，在单击时显示一个子菜单，而不是使用 hover。

当我单击它时，它会按原样显示，但我希望当我单击另一个选项时，前一个选项会被隐藏并且不会像现在一样保持打开状态。

在此先感谢您不厌其烦地帮助我的人，这是我正在使用的代码。

 $('.parent a').on("click", function(e) { $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); });

 * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; }.parent { display: block; position: relative; float: left; line-height: 30px; background-color: #4FA0D8; border-right: #CCC 1px solid; }.parent a { margin: 10px; color: #FFFFFF; text-decoration: none; }.parent>ul { position: absolute; }.child { display: none; }.child li { background-color: #E4EFF7; line-height: 30px; border-bottom: #CCC 1px solid; border-right: #CCC 1px solid; width: 100%; }.child li a { color: #000000; } ul { list-style: none; margin: 0; padding: 0px; min-width: 10em; } ul ul ul { left: 100%; top: 0; margin-left: 1px; } li:hover { background-color: #95B4CA; }.parent li:hover { background-color: #F0F0F0; }.expand { font-size: 12px; float: right; margin-right: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu"> <li class="parent"><a href="#">Popular Toys</a> <ul class="child"> <li class="parent"><a href="#">Video Games <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Car</a></li> <li><a href="#">Bike Race</a></li> <li><a href="#">Fishing</a></li> </ul> </li> <li><a href="#">Barbies</a></li> <li><a href="#">Teddy Bear</a></li> <li><a href="#">Golf Set</a></li> </ul> </li> <li class="parent"><a href="#">Recent Toys</a> <ul class="child"> <li><a href="#">Yoyo</a></li> <li><a href="#">Doctor Kit</a></li> <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a> <ul class="child"> <li><a href="#" nowrap>Cards</a></li> <li><a href="#" nowrap>Numbers</a></li> </ul> </li> <li><a href="#">Uno Cards</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> </ul>

Answer 1

将显示逻辑移动到 css 中的“.active”选择器，

.active {
    display: block;
}

然后尝试以下脚本。

它将检查单击是否不在当前菜单内，如果单击不在当前菜单的任何位置，则将删除活动的 class。

var menu = $('.parent a').next('ul')

$(document).mouseup(e => {
    if (!menu.is(e.target) // if the target of the click isn't the container...
        && menu.has(e.target).length === 0) // ... nor a descendant of the container
        {
            menu.removeClass("active");
        }
    });

$('.parent a').on("click", function (e) {
    $(this).next('ul').toggleClass("active");
    e.stopPropagation();
    e.preventDefault();
});

这是完整的代码，

 var menu = $('.parent a').next('ul') $(document).mouseup(e => { if (.menu.is(e.target) // if the target of the click isn't the container... && menu.has(e.target).length === 0) //... nor a descendant of the container { menu;removeClass("active"); } }). $('.parent a'),on("click". function (e) { $(this).next('ul');toggleClass("active"). e;stopPropagation(). e;preventDefault(); });

 * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; }.parent { display: block; position: relative; float: left; line-height: 30px; background-color: #4FA0D8; border-right: #CCC 1px solid; }.parent a { margin: 10px; color: #FFFFFF; text-decoration: none; }.parent>ul { position: absolute; }.child { display: none; }.active { display: block; }.child li { background-color: #E4EFF7; line-height: 30px; border-bottom: #CCC 1px solid; border-right: #CCC 1px solid; width: 100%; }.child li a { color: #000000; } ul { list-style: none; margin: 0; padding: 0px; min-width: 10em; } ul ul ul { left: 100%; top: 0; margin-left: 1px; } li:hover { background-color: #95B4CA; }.parent li:hover { background-color: #F0F0F0; }.expand { font-size: 12px; float: right; margin-right: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu"> <li class="parent"><a href="#">Popular Toys</a> <ul class="child"> <li class="parent"><a href="#">Video Games <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Car</a></li> <li><a href="#">Bike Race</a></li> <li><a href="#">Fishing</a></li> </ul> </li> <li><a href="#">Barbies</a></li> <li><a href="#">Teddy Bear</a></li> <li><a href="#">Golf Set</a></li> </ul> </li> <li class="parent"><a href="#">Recent Toys</a> <ul class="child"> <li><a href="#">Yoyo</a></li> <li><a href="#">Doctor Kit</a></li> <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a> <ul class="child"> <li><a href="#" nowrap>Cards</a></li> <li><a href="#" nowrap>Numbers</a></li> </ul> </li> <li><a href="#">Uno Cards</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> </ul>

Answer 2

你可以试试

$('.parent a').on("click", function (e) {
    $('.parent ul').hide();
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});

Answer 3

使用兄弟姐妹（），你有最快的解决方案：

parents("li.parent").last()保留所选项目的最高父li.parent

.sibling()保留所有其他li.parent兄弟（主菜单）

.find("ul")保留所有li.parent兄弟的所有ul孩子

$('.parent a').on("click", function(e) {
  $(this).parents("li.parent").last().siblings().find("ul").hide();
  $(this).next('ul').toggle();

  e.stopPropagation();
  e.preventDefault();
});

 $('.parent a').on("click", function(e) { $(this).parents("li.parent").last().siblings().find("ul").hide(); $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); });

 * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; }.parent { display: block; position: relative; float: left; line-height: 30px; background-color: #4FA0D8; border-right: #CCC 1px solid; }.parent a { margin: 10px; color: #FFFFFF; text-decoration: none; }.parent>ul { position: absolute; }.child { display: none; }.child li { background-color: #E4EFF7; line-height: 30px; border-bottom: #CCC 1px solid; border-right: #CCC 1px solid; width: 100%; }.child li a { color: #000000; } ul { list-style: none; margin: 0; padding: 0px; min-width: 10em; } ul ul ul { left: 100%; top: 0; margin-left: 1px; } li:hover { background-color: #95B4CA; }.parent li:hover { background-color: #F0F0F0; }.expand { font-size: 12px; float: right; margin-right: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu"> <li class="parent"><a href="#">Popular Toys</a> <ul class="child"> <li class="parent"><a href="#">Video Games <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Car</a></li> <li><a href="#">Bike Race</a></li> <li><a href="#">Fishing</a></li> </ul> </li> <li><a href="#">Barbies</a></li> <li><a href="#">Teddy Bear</a></li> <li><a href="#">Golf Set</a></li> </ul> </li> <li class="parent"><a href="#">Recent Toys</a> <ul class="child"> <li><a href="#">Yoyo</a></li> <li><a href="#">Doctor Kit</a></li> <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a> <ul class="child"> <li><a href="#" nowrap>Cards</a></li> <li><a href="#" nowrap>Numbers</a></li> </ul> </li> <li><a href="#">Uno Cards</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> </ul>