为什么 :visible 和 hide/show 不起作用？ jquery

Question

我需要切换主 div（黑色），它应该得到左侧的大小。如果右侧可见，则应将其隐藏或在不可见时显示。我写了以下 jquery 但它不起作用。

$(document).ready(function(){
    $("#btn").click(function(){
        $("#mainDiv").toggleClass("main", function(){
            if($("#rightSide").is(":visible")){
                $("#rightSide").hide('slow');
            } else{
                $("#rightSide").show('slow');
            }
        });
    });
});

以下代码有效，但当右侧首先出现在 div 底部时，并创建滚动几秒钟。是否可以让它与 main div

一起切换

$(document).ready(function(){
    $("#btn").click(function(){
        $("#mainDiv").toggleClass("main");
            $("#rightSide").toggle();

    });
});

Answer 1

基本上您是在尝试 show/hide 单击按钮时的#rightSide。因此，您想要 "collapse" 和 "expand"（不切换）#mainDiv。 collapse/expand 与 javascript 或 jquery 无关。这是一个 CSS 设置，其中所有 3 个 div 的宽度和浮动设置为主要 div 与内部可见的 div 一样宽。

$(function() {
  $("#btn").click(function() {
    $("#rightSide").toggle("slow");
  });
});

#mainDiv {
  height: 100px;
  border: 5px solid black;
  display: inline-block;
  box-sizing: border-box;
}

#leftSide {
  border: 2px solid red;
  float: left;
  width: 100px;
  height: 100%;
  background-color: pink;
  padding: 10px;
  color: red;
  box-sizing: border-box;
}

#rightSide {
  border: 2px solid green;
  float: right;
  width: 300px;
  height: 100%;
  background-color: lightgreen;
  padding: 10px;
  color: darkgreen;
  box-sizing: border-box;
}

$btn {
  margin-top: 10px;
  diaplay: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainDiv">
  <div id="leftSide">
    Left Side
  </div>
  <div id="rightSide">
    Right Side
  </div>
</div>
<button type="button" id="btn">Show/Hide</button>

为什么 :visible 和 hide/show 不起作用？ jquery

Why :visible and hide/show does not work? jquery

jquery

hide

show-hide

show

visible