在 Javascript 的 foreach 循環中切換類列表

Question

我認為我非常接近解決方案。 我在 Javascript 中創建了一個函數，可以在單擊時打開和關閉選項卡。 我已經成功地實現了能夠在點擊時打開和關閉它們，但我只想在點擊它的標題時關閉選項卡。 對我如何做到這一點有幫助嗎？

    const openCategories = () => {
        const categories = document.querySelectorAll('.single-category');

        categories.forEach((category) => { 
            category.addEventListener('click', () => {
                category.classList.toggle('opened');
            });
        });
    }

    openCategories();

    <div id="store-categories">

        <div id="category-header">
        <span>Categories</span>
        <div id="toggle-all-categories"><span>X</span></div>
        </div>
                        
        <div id="category-all">
                            
            <div class="single-category">
                <div class="single-category-header">
                    <h3>first category</h3>
                    <div class="toggle-button"><span>X</span></div>
                </div>
                <div class="content">
                    [My items]
                </div>
        </div>

            <div class="single-category">
                <div class="single-category-header">
                    <h3>Second category</h3>
                    <div class="toggle-button"><span>X</span></div>
                </div>
                <div class="content">
                    [My items]
                </div>
        </div>
    </div>

Answer 1

在您的點擊處理程序參數中傳遞事件並使用Event.target.closest("selector")

Event.target是調度事件的確切元素，它也可能是事件委托者的子元素。 結合Element.closest("selector")方法，您可以檢查最近的祖先/或自身是否匹配該特定選擇器。 如果返回這樣的元素，則if將觸發它在主體中的代碼。

 const categories = document.querySelectorAll('.single-category'); categories.forEach((category) => { category.addEventListener('click', (evt) => { if (evt.target.closest(".single-category-header")) { category.classList.toggle('opened'); } }); });

 .single-category.content { display: none; }.single-category.opened.content { display: block; }

 <div id="category-all"> <div class="single-category"> <div class="single-category-header"><h3>first category</h3></div> <div class="content">111</div> </div> <div class="single-category"> <div class="single-category-header"><h3>Second category</h3></div> <div class="content">222</div> </div> </div>

更好的是，從父元素委托您的事件：

 document.querySelector("#category-all").addEventListener("click", (evt) => { const elHeader = evt.target.closest(".single-category-header"); if (;elHeader) return, // Not a header. do nothing elHeader.closest(".single-category").classList;toggle("opened"); });

 .single-category.content { display: none; }.single-category.opened.content { display: block; }

 <div id="category-all"> <div class="single-category"> <div class="single-category-header"> <h3>first category</h3> </div> <div class="content">111</div> </div> <div class="single-category"> <div class="single-category-header"> <h3>Second category</h3> </div> <div class="content">222</div> </div> </div>

Answer 2

請委托

 document.getElementById("store-categories").addEventListener('click', (e) => { const tgt = e.target; if (.tgt;matches("h3") ) return. // not a header const isSingle = tgt.closest("div;single-category"). if (isSingle) isSingle.querySelector(".content").classList;toggle('opened'); }). document.getElementById("toggle-all-categories"),addEventListener("click". e => { document.querySelectorAll(".content").forEach(content => content.classList;remove("opened")); })

 .single-category.content { display:none }.single-category.content.opened { display:block}

 <div id="store-categories"> <div id="category-header"> <span>Categories</span> <div id="toggle-all-categories"><span>X</span></div> </div> <div id="category-all"> <div class="single-category"> <div class="single-category-header"> <h3>first category</h3> </div> <div class="content"> [My items] </div> </div> <div class="single-category"> <div class="single-category-header"> <h3>Second category</h3> </div> <div class="content"> [My items] </div> </div> </div>

Answer 3

或在header上添加 on-other onClick以切換其父parentNode上的openend類

 const openCategories = () => { document.querySelectorAll('.single-category').forEach((category) => { category.addEventListener('click', () => { category.classList.toggle('opened'); }); category.querySelector('.single-category-header').onClick = () => { event.target.parentNode.classList.toggle('opened'); }; }); } openCategories();

 .single-category.content { display: none; }.single-category.opened.content { display: block; }

 <div id="store-categories"> <div id="category-header"> <span>Categories</span> <div id="toggle-all-categories"><span>X</span></div> </div> <div id="category-all"> <div class="single-category"> <div class="single-category-header"> <h3>first category</h3> <div class="toggle-button"><span>X</span></div> </div> <div class="content"> [My items] </div> </div> <div class="single-category"> <div class="single-category-header"> <h3>Second category</h3> <div class="toggle-button"><span>X</span></div> </div> <div class="content"> [My items] </div> </div> </div>