При нажатии на раскрывающееся меню другой раскрывающийся список должен скрываться.

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 You Can ...

• определить, по какому тегу щелкнули, используя $(this) или e.target
• делегировать / регистрировать события для нескольких тегов с помощью CSS-селекторов - нет необходимости использовать атрибуты onevent, такие как onclick
• ссылка на любой jQuery Object с простой переменной

---

Объяснение

Если у вас есть несколько тегов, которые необходимо зарегистрировать / делегировать для события, используйте .class или <tagName> -использование #id является трудным и ненужным.

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

Используйте $(this), чтобы ссылаться на выбранный тег и цепочку .find(), чтобы ссылаться на его потомков, если это необходимо.Если строка становится слишком громоздкой, сохраните ее в переменной.

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

Когда вы хотите «поведение аккордеона» , закройте / деактивируйте / сверните все теги (исключая тег, на который нажали, используя.not()), затем откройте / активируйте / разверните тег, на который нажали.

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