Question

所以我有两个带有.start_over_button和.speed_buttons类的元素。 .start_over_button设置为display：none;在css和我的javascript使得当点击.speed_buttons时它们淡出而.start_over_button淡入。我的问题是我使用bootstrap定位我的页面元素和当javascript函数运行时，因为不同的高度.start_over_button和.speed_buttons，页面烦人地跳了起来。无论视口是什么，我都希望两者的高度相同，这样就不会发生这种情况，但是当我尝试在样式表中设置高度相同时，它要么没有影响，要么不能相等。这是div：

    <div class="row thirdRow">
        <!-- here I use some simple js to make my button reload the page. I should try to migrate this to my script.js file (href="javascript:location.reload(true)")-->
        <a class="start_over_button" href="index.html">
            <button type="button" class="btn btn-default btn-lg col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
                    <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                    Start Over
            </button>
        </a>
        <div class="speed_buttons">
            <label id="slowText" class="radio-inline col-xs-2 col-xs-offset-3">
                <input id="slow" class="difficulty" type="radio" name="user_options" value="300">
                    Slow
                    <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
            </label>
            <label id="medText" class="radio-inline col-xs-2">
                <input id="med" class="difficulty" type="radio" name="user_options" value="150">
                    Med
                    <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
            </label>
            <label id="fastText" class="radio-inline col-xs-2">
                <input id="fast" class="difficulty" type="radio" name="user_options" value="75">
                    Fast
                    <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
            </label>
        </div>
    </div>

这是css：

.start_over_button{
    display: none;
}

这是.js：

    $(".speed_buttons").fadeOut(0, function(){
        $(".start_over_button").fadeIn(0);
    });

我本周才开始学习代码，如果这看起来非常无知，请原谅我。在w3schools，stackoverflow和api.jquery.com中，我一直在寻找最近两天的解决方案。提前感谢您提供的任何帮助！

Answer 1

你需要在所有按钮周围添加一个额外的div，并设置该div的高度，这样无论内部发生什么都不会改变：

<div class="row thirdRow">
  <div class="buttons-container">        
   <!-- here I use some simple js to make my button reload the page. I should try to migrate this to my script.js file (href="javascript:location.reload(true)")-->
    <a class="start_over_button" href="index.html">
        <button type="button" class="btn btn-default btn-lg col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                Start Over
        </button>
    </a>
    <div class="speed_buttons">
        <label id="slowText" class="radio-inline col-xs-2 col-xs-offset-3">
            <input id="slow" class="difficulty" type="radio" name="user_options" value="300">
                Slow
                <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
        </label>
        <label id="medText" class="radio-inline col-xs-2">
            <input id="med" class="difficulty" type="radio" name="user_options" value="150">
                Med
                <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
        </label>
        <label id="fastText" class="radio-inline col-xs-2">
            <input id="fast" class="difficulty" type="radio" name="user_options" value="75">
                Fast
                <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
        </label>
    </div>
   </div>
</div>

CSS

.buttons-container {
  height:100px;
}

只需将高度调整到最大按钮尺寸即可，您应该好好去。

Answer 2

您可以使用visibility:hidden代替display:none。这是因为与从DOM中删除不同，它在技术上仍然存在，并为其分配了空间，但它对用户是不可见的。

此处有更多信息：What is the difference between visibility:hidden and display:none?

fadeOut（）后保持行高不变

2 个答案: