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

Question

我有一個創建手風琴類型的JavaScript，我想在單擊時打開div ，然后在第二次單擊時將其關閉。 我可以這樣做，但是然后我不知道在哪里插入刪除代碼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]);
}

工作演示

Answer 2

我已經編輯了一些代碼，在這里找到示例： 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 3

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