jQuery切换div显示/隐藏：如何阻止重复点击同一锚点隐藏对应div？

我有2个div，点击锚点时进行显示/隐藏切换。点击锚点1时，div1显示、div2隐藏；但再次点击锚点1时，div1也会被隐藏，这不符合预期。我尝试使用if( !$(this).closest('li').hasClass('.active') )进行判断，但并未生效。

代码示例 #

JavaScript代码

$('.showSingle').click(function() {

  if (!$(this).closest('li').hasClass('.active')) {

    $('.active').closest('li').removeClass('active');
    $(this).closest('li').addClass('active');
    $('.targetDiv').not('#div' + $(this).attr('target')).hide();
    $('#div' + $(this).attr('target')).toggle();

  }

});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<li class="active">
  <a class="showSingle" target="1">Show div 1</a>
</li>
<li>
  <a class="showSingle" target="2">Show div 2</a>
</li>

<br /><br />

<section id="div1" class="targetDiv">
  Content div 1
</section>

<section id="div2" class="targetDiv" style="display:none;">
  Content div 2
</section>

问题根源 #

1. hasClass()方法的参数只需要类名本身，不需要加.前缀，你写的hasClass('.active')永远返回false，导致判断逻辑完全失效。
2. 使用toggle()会让已显示的div被隐藏，这和你“点击已激活锚点时保持对应div显示”的需求冲突。

修改后的代码 #

JavaScript代码

$('.showSingle').click(function() {
  const $parentLi = $(this).closest('li');
  // 修正类名判断，去掉多余的.
  if (!$parentLi.hasClass('active')) {
    $('.active').removeClass('active');
    $parentLi.addClass('active');
    // 先隐藏所有目标div，再显示当前对应的div，替代toggle避免误隐藏
    $('.targetDiv').hide();
    $('#div' + $(this).attr('target')).show();
  }
});

HTML代码（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<li class="active">
  <a class="showSingle" target="1">Show div 1</a>
</li>
<li>
  <a class="showSingle" target="2">Show div 2</a>
</li>

<br /><br />

<section id="div1" class="targetDiv">
  Content div 1
</section>

<section id="div2" class="targetDiv" style="display:none;">
  Content div 2
</section>

关键修改说明 #

• 修正hasClass()的参数格式，确保激活状态判断生效
• 用hide()+show()替代toggle()，保证点击已激活锚点时，对应div始终保持显示
• 缓存父级li元素的jQuery对象，减少重复DOM查询，提升代码性能

内容的提问来源于stack exchange，提问作者Jack Maessen