javascript - 显示/隐藏具有关闭功能的多个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