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]);
}

Working demo

Answer 2

我编辑了一些你的代码，在这里找到一个例子：https://jsfiddle.net/48Lpvmbr/2/

代码：

016.02.05 12:28:52 ERROR [o.s.s.c.t.CeWorkerRunnableImpl] Failed to execute task AVKxZzs3XOSwYL28ZL1g
java.lang.NullPointerException: null key in entry: null=org.sonar.server.computation.sqale.SqaleRatingSettings$LanguageSpecificConfiguration@1a17df9
    at com.google.common.collect.CollectPreconditions.checkEntryNotNull(CollectPreconditions.java:31) ~[guava-17.0.jar:na]
    at com.google.common.collect.ImmutableMap.entryOf(ImmutableMap.java:135) ~[guava-17.0.jar:na]
    at com.google.common.collect.ImmutableMap$Builder.put(ImmutableMap.java:206) ~[guava-17.0.jar:na]
    at org.sonar.server.computation.sqale.SqaleRatingSettings.buildLanguageSpecificConfigurationByLanguageKey(SqaleRatingSettings.java:54) ~[sonar-server-5.2.jar:na]
    at org.sonar.server.computation.sqale.SqaleRatingSettings.<init>(SqaleRatingSettings.java:46) ~[sonar-server-5.2.jar:na]
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method) ~[na:1.8.0_60]
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source) ~[na:1.8.0_60]
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source) ~[na:1.8.0_60]
    at java.lang.reflect.Constructor.newInstance(Unknown Source) ~[na:1.8.0_60]
    at org.picocontainer.injectors.AbstractInjector.newInstance(AbstractInjector.java:145) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.injectors.ConstructorInjector$1.run(ConstructorInjector.java:342) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.injectors.AbstractInjector$ThreadLocalCyclicDependencyGuard.observe(AbstractInjector.java:270) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.injectors.ConstructorInjector.getComponentInstance(ConstructorInjector.java:364) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.injectors.AbstractInjectionFactory$LifecycleAdapter.getComponentInstance(AbstractInjectionFactory.java:56) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.behaviors.AbstractBehavior.getComponentInstance(AbstractBehavior.java:64) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.behaviors.Stored.getComponentInstance(Stored.java:91) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.DefaultPicoContainer.getInstance(DefaultPicoContainer.java:699) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.DefaultPicoContainer.getComponent(DefaultPicoContainer.java:647) ~[picocontainer-2.15.jar:na]
    at org.picocontainer.DefaultPicoContainer.getComponent(DefaultPicoContainer.java:632) ~[picocontainer-2.15.jar:na]

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

我稍微更改了你的代码，以便在内容周围有一个包装元素，因此只有一个事件监听器。但基本上你需要选择开放元素而不是删除类。

＆＃13;

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");
    }        
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

单击后检查div是否存在，如果存在则将其删除

4 个答案: