单击下拉菜单时，其他下拉菜单应隐藏

Question

当我单击下拉菜单时，没有prpblem的打开，但是如果我单击其他下拉菜单，则两个下拉菜单都打开了，我想在单击应打开的下拉菜单时隐藏其他打开的下拉菜单。

<div class="more-options" id="PostMenu<?php echo $p_id; ?>" onclick="openMenu(<?php echo $p_id; ?>)">
<img src="../images/ellipsis-h-solid.svg" alt="">

<div class="user-setting-drop" id="openDropMenu<?php echo $p_id; ?>">
<a href="#" title="">Report</a>
</div>
</div>

<script type="text/javascript">

            function openMenu(y){
                //alert(001);
                    $('#PostMenu'+y).on('click', function () {
                        $('#openDropMenu'+y).toggleClass('active').siblings().removeClass('active');
                        return false;
                    });
            }
          </script>

Answer 1

使用jQuery，您可以...

• 使用$(this)或e.target
确定单击了哪个标签
• 使用CSS selectors删除/注册多个标签上的事件-无需使用onevent attributes like onclick
• 使用简单变量引用任何jQuery Object

---

经验

如果您有多个标签需要注册/委托给某个事件，请使用.class或<tagName>-使用#id既繁琐又不必要。

$('.more-options').on('click', function() {...

如果需要，使用$(this)引用单击的标记，并使用链.find()引用其后代。如果一行太笨拙，请将其存储在变量中。

var clicked = $(this).find('.user-setting-drop');

如果要“手风琴行为” ，请关闭/停用/折叠所有标签（使用.not()除外单击的标签），然后打开/激活/展开单击的标签。< / p>

$('.user-setting-drop').not(clicked).removeClass('active'); 
clicked.toggleClass('active');

---

演示1

使用.remove / toggleClass()方法。如果您想要一些动画，它涉及到CSS的更多工作。

$('.more-options').on('click', function() {
  var clicked = $(this).find('.user-setting-drop');
  $('.user-setting-drop').not(clicked).removeClass('active');
  clicked.toggleClass('active');
});

.more-options {
  cursor: pointer
}

.user-setting-drop {
  max-height: 0;
  color: transparent;
  opacity: 0;
  transition: all 0.5s;
}

.active {
  height: auto;
  max-height: 5000px;
  color: #000;
  opacity: 1;
  transition: all 0.5s, max-height: 0.7s;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

<div class="more-options" id="PostMenu0">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu0">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu1">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu1">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu2">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu2">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

演示2

使用.slideToggle / Up()方法。使用内置的动画可以减少工作量。

$('.more-options').on('click', function() {
  var clicked = $(this).find('.user-setting-drop');
  $('.user-setting-drop').not(clicked).slideUp(300);
  clicked.slideToggle(500);
});

.more-options {
  cursor: pointer;
}

.user-setting-drop {
  display: none
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

<div class="more-options" id="PostMenu0">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu0">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu1">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu1">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<div class="more-options" id="PostMenu2">
  <i class="fas fa-ellipsis-h"></i>
  <div class="user-setting-drop" id="openDropMenu2">
    <a href="#/" title="">Report</a>
  </div>
</div>
<hr>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>