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

这是我想要替换工作脚本的脚本。我一直试图改变它以使用关闭功能。我可能完全相信，但希望你指导正确的方向。我收到一个错误告诉我＆＃34; box.hasClass（）不是函数＆＃34;。

$('.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和hide时。无论如何，最好将div的完整id指定为目标而不是构建它。

此外，您正在将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');
  }

});

ChoiceType

显示/隐藏具有结束功能

2 个答案: