为什么：可见和隐藏/显示不起作用？ 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的底部首次出现时，将创建滚动几秒钟。是否可以使其与主div一起切换

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

    });
});

Answer 1

基本上，您试图在按钮单击时显示/隐藏#rightSide。结果，您想“折叠”和“扩展”（而不是切换）#mainDiv。收合/展开与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>