Question

代码显示三个按钮。 CSS类“隐藏”会在单击带标记的元素时隐藏按钮。代码工作正常，但隐藏按钮时'div'框（id ='切换器'）的大小会减少。

即使按钮被隐藏，如何保持原始尺寸？

$(document).ready(function(){
  $('#switcher h3').click(function(){
    $('#switcher button').toggleClass('hidden');
  });
});

.hidden{
  display:none;
}

.switcher{
  float:right;
  border:1px solid #000;
  background-color:#ddd;
  margin:10px;
  font-size: .9em;
  padding:10px;
}

<html>
  <head>
    <link type='text/css' rel='stylesheet' href='01.css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script type='text/javascript' src='jqScripts.js'></script>
  </head>

  <body id='content'>

      <div id="container">

        <div id="switcher" class="switcher">
          <h3>Style Switcher</h3>
          <button id="switcher-default">
            Default
          </button>
          <button id="switcher-narrow">
            Narrow Column
          </button>
          <button id="switcher-large">
            Large Print
          </button>
        </div>

      </div>

  </body>
</html>

Answer 1

将您的风格更新为以下

.hidden{
    visibility: hidden;
}

有关详细信息，请visibility

Answer 2

使用visibility: hidden;代替display：none;

.hidden{
    visibility: hidden;
}

Answer 3

Css解决方案1：

.hidden{
   visibility: hidden;
}

Css解决方案2：

.hidden{
   opacity: 0;
}

Jquery Solution 1（固定父div的高度）：

$(window).laod(function(){
    var initialHeight=$('#switcher').height();
    $("#siwtcher").height(initialHeight);
})

Jquery解决方案2：

$(document).ready(function(){
    $('#switcher h3').click(function(){
        $('#switcher button').fadeTo(0);
    });
});

Answer 4

您应该使用visibility: hidden;代替"display:none;" 所以，更新你的CSS，如下所示，

.hidden{
    visibility: hidden;
}

使用visibility: hidden;代替"display:none;"的原因如下：

display：none 标签不可见，也没有为其分配空间。

visibility：hidden 标记不可见，但在页面上为其分配了空间。

Answer 5

$(function(){
   $('#showall').click(function(){
   $('.targetDiv').show();
});
        $('.showSingle').click(function(){
              $('.targetDiv').hide();
              $('#div'+$(this).attr('target')).show();
        });
});

body{
   width:100%;
   height:100%;
   background: #eee;
}
div.menu{

   margin: 5% 10%;
   background: transparent;
}

a, #showall{
   display:inline-block;
   margin:0 1%;
   padding:2%;
   border-radius: 10%;
   -webkit-box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
   box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
}
a:nth-child(1){
  background:#E63946; 
   color: #eee;
}
a:nth-child(2){
    background:#F1FAEE; 
   color: #222;
}
a:nth-child(3){
   background: #A8DADC; 
    color: #222;

}
a:nth-child(4){
   background: #457B9D;
   color: #eee;
}
a:nth-child(5){
   background: #1D3557;  
   color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></style>
<div class="menu">
<a  id="showall">All</a>
<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

<section class="cnt">
<div id="div1" class="targetDiv">Content   1</div>
<div id="div2" class="targetDiv">Content   2</div>
<div id="div3" class="targetDiv">Content   3</div>
<div id="div4" class="targetDiv">Content   4</div>
</section>

CSS样式隐藏/显示按钮

5 个答案: