Question

我有一个隐藏的div，我需要使用不同的CSS样式顺利显示它，除了＆＃34; display＆＃34;之外，所有样式都可以轻松更改。但是这个属性是至关重要的，因为当它开始出现时，它将以不同的方式移动页面上的其他元素。这将取决于＆＃34;显示＆＃34;出现元素的属性。下一个元素将向右或向下移动。

我有2个按钮 - （将div显示为块）和（将div显示为内联块）它应该可以工作，但事实并非如此。

jsfiddle example

这是另一个jsfiddle，显示如何更改可见div上的显示属性。我需要在隐藏div的同时更改它，然后使用简单的＆＃34; .toggle（500）;＆＃34;顺畅地显示新的显示属性。

＆＃13;

$("#f").hide();

$(".toggle_h").bind("click", function(){    
    $("#f").hide();
})

$(".toggle_b").bind("click", function(){    
    $("#f")    
    .removeClass('i')
    .addClass('b')
    .toggle(500);
    return false;
})

$(".toggle_i").bind("click", function(){    
    $("#f")    
    .removeClass('b')
    .addClass('i')
    .toggle(500);
    return false;
})

＆＃13;

.b{
    display:block;
    background:red;
}

.i{
    display:inline-block;
    background:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f' >block2 flexible</div> 
<div class="i">block3 inline</div> 
<br>
<a href="#" class="toggle_b">show as block</a><br>
<a href="#" class="toggle_i">show as inline</a><br>
<a href="#" class="toggle_h">hide</a><br>

＆＃13;

Answer 1

我认为这是不可能的。

但有一种方法可以绕过这个错误。只需将div的内容包装到另一个div中并切换内容包装器，同时原始div将保持可见，因为在可见div上您可以更改显示选项。

这是jsfiddle

$(".toggle_b").bind("click", function(){    
    $("#w").hide();
     $("#f")        
      .removeClass('i')
      .addClass('b')
     $("#w").toggle(500);
})

$(".toggle_i").bind("click", function(){
    $("#w").hide();
    $("#f")    
    .removeClass('b')
    .addClass('i');
    $("#w").toggle(500);
})

.b{
    display:block;
    background:red;
}

.i{
    display:inline-block;
    background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f'> <div id='w' > block2 flexible</div> </div> 
<div class="i">block3 inline</div> 
<br>
<a href="#" class="toggle_b">show as block</a><br>
<a href="#" class="toggle_i">show as inline</a><br>

我找到的另一种方法是改变不是“显示”，而是另一种实现类似效果的CSS属性，使用“float：left;”。

但是浮动元素不能在它们内部进行垂直对齐。

Answer 2

如果没有参数，$("#f").hide();将立即隐藏元素而不显示动画。如果要为其设置动画，请添加持续时间参数，例如

$(".toggle_h").bind("click", function(){    
    $("#f").hide(500);
})

Answer 3

display属性无法转换。使用jQuery的show和hide方法基本上与在CSS中说display: block和display: none基本相同，正如我刚才提到的那样，它无法转换。但是，opacity或width等属性可以通过CSS进行转换。你想要切换一个类，而不是使用.show和.hide，让CSS进行转换。

如果您希望使用jQuery简单淡入淡出，则可以将.hide方法替换为.fadeOut。

注意：我希望这就是你所指的：）

更改班级或CSS＆＃34;显示＆＃34; DIV的财产并顺利展示

3 个答案: