javascriptmenutoggle中的foreach應該在我單擊的圖示中處于活動狀態

我希望你做得很好，我正在使用 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>

所以當我點擊其中一個時，我會看到所有專案的所有選單。所以當我只點擊其中一個時，我不想看到所有的 menutoggle。

uj5u.com熱心網友回復：

您目前只是在所有.menupost元素上切換活動類。相反，您需要從所有這些元素中洗掉活動類，然后僅將其添加到被單擊元素的同級元素中。

這有點棘手，但一種方法是檢查 是否event.target與當前迭代的.menupost元素在同一個父元素中。這里closest()用于檢索最近的共同祖先。您還需要將事件傳遞給onclick宣告中的回呼。

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>

標籤：javascript 姜戈

上一篇：通過for回圈將值保存到Django模型

下一篇：當用戶通過Django模型表單注冊時，如何為特定型別的用戶生成自定義ID