单击两个下拉菜单

Question

如何实现按第4点时第1项菜单下的隐藏？

我通过添加检查实现的：

if ($('.arm-new-ext').children('ul').hasClass('show')) $('.arm-new-ext').click();

和

if ($('.arm-ext').children('ul').hasClass('show')) $('.arm-ext').click();

这是一个正确的决定吗？你会如何实施它？

.main-menu {
  
  
}

.main-menu li {
  list-style: outside none none;
  cursor: pointer;
  float: left;
}

.hide {
  display: none;
}

.show {
  display: block;
}

ul.menu {
  border: 1px solid #95958d;
  position: absolute;
  margin: 0;
  padding: 0;
}

ul.menu li {
  font: 14px Segoe UI, sans-serif;
  list-style: outside none none;
  position: static;
  line-height: 20px;
  text-align: left;
  clear: both;
  background: #faf8f5;
  padding: 2px 0px;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(function() {
    $('.arm-new-ext').click(function(e) {
      // My solution!
     // if ($('.arm-ext').children('ul').hasClass('show')) $('.arm-ext').click();

      if ($(this).children('ul').hasClass('show'))
        $(this).children('ul')
        .removeClass('show')
        .addClass('hide');
      else
        $(this).children('ul')
        .addClass('show')
        .removeClass('hide');

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

    $('.arm-ext').click(function(e) {
      // My solution!
     // if ($('.arm-new-ext').children('ul').hasClass('show')) $('.arm-new-ext').click();

      if ($(this).children('ul').hasClass('show'))
        $(this).children('ul')
        .removeClass('show')
        .addClass('hide');
      else
        $(this).children('ul')
        .addClass('show')
        .removeClass('hide');

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

    $('body').click(function() {
      if ($('.arm-new-ext').children('ul').hasClass('show'))
        $('.arm-new-ext').children('ul')
        .removeClass('show')
        .addClass('hide');

      if ($('.arm-ext').children('ul').hasClass('show'))
        $('.arm-ext').children('ul')
        .removeClass('show')
        .addClass('hide');
    })
  });
</script>
<body style="border:1px solid red">
<ul class="main-menu">
  <li class="arm-ext">
    <span>Пункт 1</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li class="arm-new-ext">
    <span>Пункт 4</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 5</li>
</ul>
</body>

Answer 1

您可以使用 toggleClass 来实现：

var $menuHeader = $('.arm-new-ext,.arm-ext');
var $menuItems = $menuHeader.children('ul');
$menuHeader.click(function(e) {
    var $currentMenuItems = $(this).children('ul');
    $menuItems.not($currentMenuItems).removeClass('show').addClass('hide')
    $currentMenuItems.toggleClass('show hide');
});

.main-menu {
  
  
}

.main-menu li {
  list-style: outside none none;
  cursor: pointer;
  float: left;
}

.hide {
  display: none;
}

.show {
  display: block;
}

ul.menu {
  border: 1px solid #95958d;
  position: absolute;
  margin: 0;
  padding: 0;
}

ul.menu li {
  font: 14px Segoe UI, sans-serif;
  list-style: outside none none;
  position: static;
  line-height: 20px;
  text-align: left;
  clear: both;
  background: #faf8f5;
  padding: 2px 0px;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(function() {
    
var $menuHeader = $('.arm-new-ext,.arm-ext');
var $menuItems = $menuHeader.children('ul');
$menuHeader.click(function(e) {
   debugger
    var $currentMenuItems = $(this).children('ul');
    $menuItems.not($currentMenuItems).removeClass('show').addClass('hide')
    $currentMenuItems.toggleClass('show hide');
   

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

    

    $('body').click(function() {
      if ($('.arm-new-ext').children('ul').hasClass('show'))
    $('.arm-new-ext').children('ul')
    .removeClass('show')
    .addClass('hide');

  if ($('.arm-ext').children('ul').hasClass('show'))
    $('.arm-ext').children('ul')
    .removeClass('show')
    .addClass('hide');
    })
  });
</script>
<body style="border:1px solid red">
<ul class="main-menu">
  <li class="arm-ext">
    <span>Пункт 1</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li class="arm-new-ext">
    <span>Пункт 4</span>
    <ul class="menu hide">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Пункт 5</li>
</ul>
</body>

单击两个下拉菜单

Two pull down menus by clicking

html

css

jquery

click

drop-down-menu