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

jsFiddle Demo

编辑：替换$(document).ready()包装，以防万一

jQuery检查if语句中的元素是否可见无效

2 个答案: