javascript - 在同一层隐藏和显示 div

Question

我的 jsp 页面是这样的:编辑:http://jsfiddle.net/F4nA9/

<div id="fonctiondetails">  
   [...]
   <img onclick="showoption()" ... />
   [...]
</div>
<div id="addqualite" style="display: none;">
   [...]                
</div>

还有我的 jQuery 函数来隐藏和显示我的 DIV

function showoption() {

    $( "#fonctiondetails" ).hide('slide',1000);
    $( "#addqualite" ).show('slide',1000);

}

问题是，当我的第一个 div 消失时，第二个 div 从底部出现并向上替换第一个 div，但我希望她显示在与第一个 div 相同的级别并且来自左侧或第一个 div 的右边。

Answer 1

您的 div 在设计中必须处于同一位置/级别；

认为:

<style>
    #fonctiondetails{
        position: absolute;
        top:0;
        left:0;
    }
    #addqualite{
        position: absolute;
        top:0;
        left:0;
        display:none;
    } 
</style>

在这种情况下，2 个 div 位于同一位置，因此当第一个 div 消失时，第二个 div 将显示。而且它们不会有移动效果，因为它们都在同一个地方。

示例样式是向您展示 div 的位置。但是你必须根据你的模板/页面设计你的 div。

尝试使用位置样式(绝对、相对、静态或固定)

我认为这会很有帮助