Question

单独显示class-A（位于页面顶部），而隐藏所有其他（x，x，c）。单独隐藏A类，而显示所有其他（x，x，c）。

这可能吗？

<div class="x">
    <div class="y">
        <div class="z"></div>
    </div>
</div>
<div class="A">
    <div class="y">
        <div class="z"></div>
    </div>
</div>
<div class="x">
    <div class="w">
        <div class="q"></div>
    </div>
</div>
<div class="C">
    <div class="p">
        <div class="s"></div>
    </div>
</div>

如果代码只有A类，那会更好（不包括其他类（x，c））。因为这些可能会动态变化。

我试过这个：http://jsfiddle.net/smilyface/qX546/

Answer 1

你可以这样检查

if($('.A').is(":visible")){
  $('.A').hide();
  $("div:not('.A')").show();
}else if($("div:not('.A')").is(':visible')){

}

这可以帮到你

Answer 2

你可以使用，

var a=$("div.A");
var others=$("div").not(".A,.A div");
a.toggle();
others.toggle();

Fiddle

Answer 3

您也可以使用切换进行操作，但首先必须在页面加载时隐藏A类：

$('.A').hide();

$('#button').click(function(){
    $('.A').toggle();
    $('.x').toggle();
    $('.C').toggle();
});

jsfiddle

Answer 4

我会将三个DIV（a，x，c）包装在一个外部DIV中。

<div class="x">
</div>
<div class="outer">
    <div class="A">
    </div>
    <div class="x">
    </div>
    <div class="C">
    </div>
</div>

您最初可以在CSS定义中将.outer设置为display:none。

.outer { display: none; }

然后，您可以使用jQuery来调用$('.x').toggle()和$('.outer').toggle()。

更简单的方法是在两个DIV上添加一个类名，并在该类上调用toggle()一次。

<div class="x toggleMe">
</div>
<div class="toggleMe" style="display:none;">
    <div class="A">
    </div>
    <div class="x">
    </div>
    <div class="C">
    </div>
</div>

的jQuery

$('.toggleMe').toggle();

Answer 5

绝对有可能，

首先给出display：none;作为类a的默认值，对于其余类没有任何内容，

并使用jquery切换两者。

喜欢

//in css
.A {
   display: none;
 }

//in js

$('.A').toggle();
$('.X,.C').toggle();

CSS vs jQuery |是否可以在div中隐藏/显示div？

5 个答案: