jQuery检查if语句不起作用时元素是否可见

Question

我需要一次仅显示所选div之一的函数。除了if语句，我几乎可以正常工作。我希望按钮隐藏div（如果已显示）。但这是行不通的，我不知道为什么。谢谢您的帮助。

jQuery(function() {
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    if (jQuery('#div' + $(this).attr('target')).is(":visible")) {
      jQuery('.targetDiv').hide();
    } else {
      jQuery('#div' + $(this).attr('target')).slideToggle();
    }
  });
});

.targetDiv {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showSingle" target="1">Div 1</button>
<button class="showSingle" target="2">Div 2</button>
<button class="showSingle" target="3">Div 3</button>
<button class="showSingle" target="4">Div 4</button>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

Answer 1

函数的第一行将隐藏所有DIV：

$(".targetDiv").hide();

所以当它测试目标DIV是否可见时，它不是，因为您只是隐藏了它。您应该隐藏除目标以外的所有DIV：

$(".targetDiv:not(#div"+$(this).attr("target")+")").hide();

jQuery(function() {
  jQuery('.showSingle').click(function() {
    var targetID = '#div' + $(this).attr('target');
    jQuery('.targetDiv:not('+targetID+')').hide();
    if (jQuery(targetID).is(":visible")) {
      jQuery('.targetDiv').hide();
    } else {
      jQuery(targetID).slideToggle();
    }
  });
});

.targetDiv {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showSingle" target="1">Div 1</button>
<button class="showSingle" target="2">Div 2</button>
<button class="showSingle" target="3">Div 3</button>
<button class="showSingle" target="4">Div 4</button>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

Answer 2

这就是您所需要的：

jQuery(function() {
    jQuery('.showSingle').click(function(){
        jQuery('.targetDiv').slideUp();
        jQuery('#div'+$(this).attr('target')).slideToggle();
    });
});

演示：

jQuery('.showSingle').click(function() {
  jQuery('.targetDiv').slideUp();
  jQuery('#div' + $(this).attr('target')).slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="showSingle" target="1">Div 1</button>
<button class="showSingle" target="2">Div 2</button>
<button class="showSingle" target="3">Div 3</button>
<button class="showSingle" target="4">Div 4</button>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

---

编辑：替换了$(document).ready()包装器，以防万一它不是理解