Question

我已粘贴下面的javascript，但也链接到我的codepen，所以你可以看到我正在谈论的内容。

我希望点击标题并显示下面的文字。在另一次点击，我希望文本回到隐藏。可以同时打开多个标题。我当前设置发生的事情是您可以单击一次显示，再次单击以隐藏，然后再次单击以显示任何显示，如果您继续单击文本，则下面的标题是eaten / dissapear。我宁愿没有jquery这样做。谢谢你的帮助。

http://codepen.io/jrutishauser/pen/YPrrNa

 var clickToShow = function () { 
          if (this.nextElementSibling.className === 'open'){
                  this.nextElementSibling.remove('open');
          } else if (this.nextElementSibling.className != 'open') { 
          this.nextElementSibling.className = 'open';
          } 
  }; 

  var articleHeadings = document.getElementsByTagName('h3');

 for (var index = 0; index < articleHeadings.length; index++){
         articleHeadings[index].onclick = clickToShow;
 }

 var subArticleHeadings = document.getElementsByTagName('h4');

 for (var index2 = 0; index2 < subArticleHeadings.length; index2++){
         subArticleHeadings[index2].onclick = clickToShow;
 }

Answer 1

将this.nextElementSibling.remove('open')更改为this.nextElementSibling.className = ''。我相信remove（）方法会删除元素，而不是类。

Answer 2

你也可以这样做。这是正确的做法。

var clickToShow = function () { 
      element=this.nextElementSibling;
          if (element.className === 'open'){
              element.className=element.className.replace('open','');
          } else if (element.className != 'open') { 
          element.className = 'open';
          } 
  };

再次点击时，标题下方的标签会消失，因为javascript不知道为什么

2 个答案: