javascript - 单击下拉菜单

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>