Foreach в javascript menutoggle должен быть активен только в иконке, на которой я кликнул

Надеюсь, у вас все хорошо, я использую django, проблема в том, что у меня есть список элементов, который содержит menuToggle, мой код выглядит так

<!--here is code .... -->
<div class="container">
            {% ifequal request.user.username obj.author.user.username %}
                <div class="action1">
                    <div class="icon" onclick="menuToggle1();">
                        <img src="{% static 'images/ore.svg'%}" class="svg">
                    </div>
                    <div class="menupost" id="menupost">
                        <ul>
                            <li><i class="fa fa-refresh" aria-hidden="true" style="margin-right:10px;"></i><a href="{% url ''%}">Update</a></li>
                            <li><i class="fa fa-trash-o" aria-hidden="true" style="margin-right:10px;"></i><a href="{% url ''%}">Delete</a></li>
                        </ul>
                    </div>
                </div>
                <h2 id="title" class="title">{{obj.title}}</h2>
<!--and so on...-->
</div>

<script>
    function menuToggle1(){
        
        document.querySelectorAll('.menupost').forEach(function(element) {
            element.classList.toggle('active');
        });
    };  
</script>

поэтому, когда я нажимаю на один из них, я вижу все меню всех пунктов. Поэтому я не хочу видеть все меню, когда я нажимаю только на один из них. Думаю, вы поняли мой вопрос, надеюсь, вы сможете мне помочь.

В настоящее время вы просто переключили активный класс на всех элементах .menupost. Вместо этого вам нужно удалить активный класс со всех них, а затем добавить его только к элементу с щелчком мыши, которым будет event.target.

<script>
  function menuToggle1(event) {

    document.querySelectorAll('.menupost').forEach(function (element) {
      element.classList.remove('active');
    });

    event.target.classList.add('active');
  }
</script>
Вернуться на верх