Javascript 使用jquery隐藏组件时停止组件移动_Javascript_Jquery_Css_Html

Javascript 使用jquery隐藏组件时停止组件移动

javascript jquery css html

Javascript 使用jquery隐藏组件时停止组件移动,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我需要防止组件移动，同时使用jquery隐藏它在JSFIDLE中，我们可以看到形状标签正在移动其位置如何阻止此组件移动 JsFiddle：请参阅以下代码： <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> $

我需要防止组件移动，同时使用jquery隐藏它

在JSFIDLE中，我们可以看到形状标签正在移动其位置

如何阻止此组件移动

JsFiddle：

请参阅以下代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('button.Down').click(function() { 
            $('.colorList').slideDown('fast'); 
            $('button.Down').hide(); 
        });
        $('button.Up').click(function() { 
            $('.colorList').slideUp('fast');
            $('button.Down').show();  
        });
    });
</script>
</head>
<body>
<label>Color:</label>
<div class="colorContainer">
    <button type="button" id="Down" class="Down" style="margin-left: 30px;"> Down </button>
    <fieldset class="colorList" style="background: none repeat scroll 0 0 #FFFFFF; display:none; position: absolute; float:right; margin-left: 30px;">
         <span>Blue</span><br/>
         <span>White<br/></span>
         <span>Red<br/></span>
         <span>Orange<br/></span>
         <span>Green<br/></span>
         <span><button type="button" id="Up" class="Up"> UP </button></span>
    </fieldset>
</div>
<br>
<label>Shape:</label>
</body>
</html>


$（文档）.ready（函数（）{
$（'button.Down'）。单击（函数（）{
$（'.colorList'）.slideDown（'fast'）；
$（'button.Down'）.hide（）；
});
$（'button.Up'）。单击（函数（）{
$（'.colorList'）.slideUp（'fast'）；
$（'button.Down'）.show（）；
});
});
颜色：
向下
蓝色

白色

红色

橙色

绿色

向上的


形状：

不要隐藏按钮，而是使用下方css隐藏下拉列表下方的按钮

CSS

.colorContainer{position:relative;}
.colorList{position:absolute; top:0; left:0;}
.opacity{opacity:0;}

JS代码

$(document).ready(function() {
    $('button.Down').click(function() { 
        $('.colorList').slideDown('fast'); 
        $('button.Down').addClass('opacity'); 
    });
    $('button.Up').click(function() { 
        $('.colorList').slideUp('fast');
        $('button.Down').removeClass('opacity');  
    });
 });

您可以将

按钮

包装在

div

中，这样标签在向下滑动之前最初隐藏时不会移动

<div id="dropdownContainer">
   <button type="button" id="Down" class="Down" style="margin-left: 30px;">Down</button>
</div>

使用css

可见性属性，而不是使用show（）
和hide（）
属性。它将保留空间。看到这个了吗

由于您使用的是display
CSS属性，因此出现了此问题。请改用visibility
 这实际上是一个一般的html问题，没有正确定义。很高兴你有一把小提琴，但是你不想移动的是什么部件？如果您不想在html中移动更多的组件，请不要删除它们上面的元素或使用绝对大小或位置。我不认为这个问题对其他任何人都有帮助。@Ravimallya我不知道我只是在更新答案，不用担心。顺其自然：）谢谢你解决了这个问题。
#dropdownContainer {
    height: 15px;
}

$(document).ready(function() {
        $('button.Down').click(function() { 
            $('.colorList').slideDown('fast'); 
            $('button.Down').css('visibility', 'hidden'); 
        });
        $('button.Up').click(function() { 
            $('.colorList').slideUp('fast');
            $('button.Down').css('visibility', 'visible');  
        });
    });

$(document).ready(function() {
        $('button.Down').click(function() { 
            $('.colorList').slideDown('fast'); 
            $('button.Down').css('visibility',' hidden'); 
        });
        $('button.Up').click(function() { 
            $('.colorList').slideUp('fast');
            $('button.Down').css('visibility', 'visible');  
        });
    });