单击下拉菜单

Question

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

当我点击它时，它会按原样显示，但我希望当我点击另一个选项时，前一个被隐藏，而不是像现在一样打开。

提前，非常感谢不厌其烦帮助我的人，这是我正在使用的代码。

$('.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;
}

然后尝试以下脚本。

它会检查点击是否不在当前菜单内，如果点击在当前菜单之外的任何地方，活动类将被删除。

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

使用siblings()，你有最快的解决方案：

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

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

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

$('.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>