使用关闭功能显示/隐藏多个 div

Question

我几乎要放弃了。找不到任何解决方案，所以我希望你能帮助我。我有一个显示/隐藏 div 的脚本，它的工作原理是这样的。如果您单击一个按钮，则会显示一个 div，如果您按下另一个按钮，它将切换到该 div。这很好用。但我希望能够通过单击最后一个按钮来关闭所有 div。

这是我的 HTML

<div class="hidden-divs-buttons">                   
    <a class="show-div btn" target="1">Div 1</a>
    <a class="show-div btn" target="2">Div 2</a>
</div>

<div class="hidden-divs">
    <div id="div1" class="target-div">Content div 1</div>
    <div id="div2" class="target-div">Content div 2</div>
</div>

此脚本有效，但没有关闭功能

$('.show-div').click(function() {
  $('.target-div').hide();
  $('#div' + $(this).attr('target')).fadeIn(1000);        
});

这是我要替换工作脚本的脚本。我一直在尝试将其更改为使用关闭功能。我可能完全赞成，但希望你能指引正确的方向。我收到一条错误消息，告诉我“box.hasClass() 不是函数”。

$('.show-div').click(function() {
  var box = $('#div' + $(this).attr('target'));
  $('.target-div').hide();

  if(box.hasCLass('close-div')) {
      box.removeClass('close-div');
      $('.target-div').fadeOut(1000);
  } else {
      box.fadeIn(1000);
      box.addClass('close-div');
  }

});

编辑 ID 已更新。

这就是代码的样子。使用此代码，我可以单击一个按钮并显示一个 div，单击下一个以显示另一个 div。如果我再次单击同一个按钮，它将关闭所有 div。

$('.show-div').click(function() {
  var box = $('#div' + $(this).attr('target'));  

  if(box.hasClass('close-div')) {
      $('.target-div').removeClass('close-div');
        $('.target-div').fadeOut(1000);   
  } else {
      $('.target-div').removeClass('close-div');
      $('.target-div').hide();
      box.fadeIn(1000);
      box.addClass('close-div');
  }   
});

Answer 1

if(box.has[CL]ass('close-div')) { 中有错字 hasClass 不是 hasCLass

Answer 2

hasClass 没有大写 L - 它是 hasClass 而不是 hasCLass 不确定这只是问题中的拼写错误还是您的真实代码。

另外，hidden-divs 部分中的两个 div 具有相同的 id 和 div1，而它们应该是 div1 和 div2。无论如何，最好将 div 的完整 id 指定为目标而不是构建它。

此外，您在淡出之前将hide 应用于target-div 类的所有元素，这完全违背了淡出的想法

<div class="hidden-divs-buttons">                   
    <a class="show-div btn" target="div1">Div 1</a>
    <a class="show-div btn" target="div2">Div 2</a>
</div>

<div class="hidden-divs">
    <div id="div1" class="target-div">Content div 1</div>
    <div id="div2" class="target-div">Content div 2</div>
</div>

$('.show-div').click(function() {
  var box = $('#' + $(this).attr('target'));

  // this makes them invisible, so fadeOut is pointless
  $('.target-div').hide(); 

  if(box.hasClass('close-div')) {
      box.removeClass('close-div');
      $('.target-div').fadeOut(1000);
  } else {
      box.fadeIn(1000);
      box.addClass('close-div');
  }

});