foreach in javascript menutoggle should be active in the icon I clicked in only-CodePudding

I hope you are doing well, I am using django, problem is I have a list of items that contains a menuToggle my code is like this

<!--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>

so when I click on one of them , I see all the menu of all items. so I don't want to see all menutoggle when I click on just one of them.

CodePudding user response：

You are currently just toggling the active class on all .menupost elements. Instead you need to remove the active class from all of them, and then only add it to the sibling of the clicked element.

This is a little trickier, but one way to do it is to check if the event.target is inside the same parent element as the currently iterated .menupost element. Here using closest() to retrieve the closest common ancestor. You also need to pass the event to the callback in your onclick declaration.

function menuToggle1(event) {
  const active_ancestor = event.target.closest('.action1');
  
  document.querySelectorAll('.menupost').forEach(function (element) {
    element.classList.remove('active');

    if (active_ancestor === element.closest('.action1')) {
      element.classList.add('active');
    }
  });
}

.active {
  background-color: tomato;
}

<div class="container">
  <div class="action1">
    <div class="icon" onclick="menuToggle1(event);">
      <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>
</div>
<div class="container">  <div class="action1">      <div class="icon" onclick="menuToggle1(event);">          <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></div><div class="container">  <div class="action1">      <div class="icon" onclick="menuToggle1(event);">          <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></div>