檢查點擊後是否存在div，如果存在則將其刪除

Question

我有一個JavaScript，它是創建一種類型的手風琴，我想單擊打開div s，然後再次點擊關閉它們。我可以做到這一點，但我不知道在哪裏插入刪除代碼el.classList.remove("openDiv");關閉所有可能被打開的標籤，唯一應該打開的標籤是被點擊的標籤。

下面是JavaScript代碼：

var el = document.getElementsByClassName('applications'); 
var i; 
var action = 1; 

function addHandler(el) { 
    el.addEventListener("click", function() { 

    if (action == 1) { 
     el.classList.add('openDiv'); 
     action = 2; 
    } else { 
     el.classList.remove("openDiv"); 
     action = 1; 
    } 
    }); 
} 

for (i = 0; i < el.length; i++) { 
    addHandler(el[i]); 
} 

我還創建了一個DEMO

Answer 1

var el = document.getElementsByClassName('applications'); 
var i; 

function addHandler(el) { 
    el.addEventListener("click", function() { 

    //updated condition for click 
    if (!this.classList.contains('openDiv')) { 
     var a = document.getElementsByClassName('openDiv'); 
     for (var i in a) { 
      if (a[i].classList) { 
      a[i].classList.remove("openDiv"); 
      } 
     } 
     el.classList.add('openDiv'); 
     action = 2; 
    } else { 
     el.classList.remove("openDiv"); 
     action = 1; 
    } 

    }); 
} 

for (i = 0; i < el.length; i++) { 
    addHandler(el[i]); 
} 

Working demo

Answer 2

var el = document.getElementsByClassName('applications'); 
var i; 

function addHandler(el) { 
    el.addEventListener("click", function() { 
    el.classList.toggle('openDiv'); 
     removeOpen(el); 
    }); 
} 

function removeOpen(openElement){ 
    for (i = 0; i < el.length; i++) { 
    if(el[i] !== openElement){ 
    el[i].classList.remove("openDiv"); 
    } 
    } 
} 

for (i = 0; i < el.length; i++) { 
    addHandler(el[i]); 
} 

Answer 3

我已經編輯了一點你的代碼，在這裏找到一個例子：https://jsfiddle.net/48Lpvmbr/2/

代碼：

var els = document.getElementsByClassName('applications'); 

function addHandler(el) { 
    el.addEventListener("click", function() { 

    for(var x = 0; x < els.length; x++){ 
     if(els[x] === el){ 
      console.log("NOT ME!!!"); 
     }else{ 
      els[x].classList.remove("openDiv"); 
     } 
    } 

    if(el.classList.contains("openDiv")){ 
     el.classList.remove("openDiv"); 
    }else{ 
     el.classList.add("openDiv"); 
    } 

    }); 
} 

for (var i = 0; i < els.length; i++) { 
    addHandler(els[i]); 
} 

Answer 4

我改變了你的代碼稍微有內容周圍的包裝元素，以便只有一個事件偵聽器。但基本上你需要選擇打開的元素，而不是刪除類。

var wrapper = document.getElementById("application_wrapper"); 
 
wrapper.addEventListener("click", function(evt) { 
 
    var elem = evt.target; //get what was clicked 
 
    if (elem.nodeName === "H2") { //see if it was an h2 
 
    elem.classList.toggle("open"); 
 
    
 
    //now to remove 
 
    var opened = wrapper.querySelectorAll("h2.open"); //find opened 
 
    for(var i=opened.length-1; i>=0;i--) { //loop 
 
     if (opened[i]==elem) continue; //make sure we do not remove the one we just added 
 
     opened[i].classList.remove("open"); 
 
    }   
 
    } 
 
});

h2 + h1, 
 
h2 + h1 + p { 
 
    display: none; 
 
} 
 
h2.open + h1, 
 
h2.open + h1 + p { 
 
    display: block; 
 
} 
 

 
.applications { border: 1px solid black; } 
 
h1{ border-top: 1px solid #CCC; } 
 
h2{cursor: pointer;}

<div id="application_wrapper"> 
 
    <div class="applications" id="colorCos"> 
 
    <h2>Color Cosmetics</h2> 
 
    <h1>Color Cosmetics</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod 
 
     eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit 
 
     amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
    </div> 
 
    <div class="applications" id="hairCare"> 
 
    <h2>Hair Care</h2> 
 
    <h1>Hair Care</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod 
 
     eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit 
 
     amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
    </div> 
 
    <div class="applications" id="babyCare"> 
 
    <h2>Baby Care</h2> 
 
    <h1>Baby Care</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod 
 
     eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit 
 
     amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
    </div> 
 
    <div class="applications" id="skinCare"> 
 
    <h2>Skin Care</h2> 
 
    <h1>Skin Care</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod 
 
     eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit 
 
     amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
    </div> 
 
    <div class="applications" id="soap"> 
 
    <h2>Soap & Bath</h2> 
 
    <h1>Soap & Bath</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod 
 
     eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit 
 
     amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
    </div> 
 
</div>