Почему: видим и скрыть / показать не работает? jquery - PullRequest
Новая
       114

Почему: видим и скрыть / показать не работает? jquery

0 голосов
/ 11 февраля 2020

quer

Мне нужно переключить основной div (черный), и он должен получить размер левой стороны. Если правая сторона видна, она должна быть скрыта или показана, когда она не видна. Я написал следующее jquery, но оно не работает. 

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

следующий код работает, но когда справа появляется первый apperas внизу div и создается прокрутка для секунд. Можно ли сделать так, чтобы он переключался вместе с основным div 

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

    });
});

1 Ответ

1 голос
/ 11 февраля 2020

В основном вы пытаетесь показать / скрыть #rightSide нажатием кнопки. В результате вы хотите «свернуть» и «развернуть» (не переключать) #mainDiv. Свернуть / развернуть не имеет ничего общего с javascript или jquery. Это параметр CSS, в котором ширина и плавающее значение всех трех элементов делятся таким образом, что основной элемент равен ширине видимых элементов внутри. 

$(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>
...