jQuery toggleClass не работает должным образом (закрыть div)

Я хотел бы иметь кнопку переключения класса div (боковая панель)на щелчок. Класс должен закрыть боковую панель, установив значение max-height130px.

Это то, что я пытался до сих пор, но по какой-то причине это не работает для меня:

jQuery(document).ready(function() {
  $('.close_sidebar').click(function() {
    $('.sidebar').slideToggle("slow");
    $('.sidebar').toggleClass('closed');
    if ($('.sidebar').hasClass('closed')) {
      $('.close_sidebar_text').text('OPEN MAP');
    } else {
      $('.close_sidebar_text').text('CLOSE MAP');
    }
  });
});
#map-canvas {
  clear: both;
  width: 100%;
  height: 600px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 0 auto;
}
.closed {
  max-height: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="close_sidebar" style="border-style:solid; width:70px; height:25px; margin:-5px 0px 0px 647px; cursor:pointer; padding:5px;">
  <div class="close_sidebar_text" style="color:#000; border-style:none; margin:-7px 0px 0px 0px; font-size:12px; font-family: Agency FB;">
    OPEN MAP
  </div>
</div>

<div class="sidebar" style="border-style:none; margin:0px auto 0px; ">
  <div class="searchform" style="color:#000; position:absolute; z-index:1; margin:120px 0px 0px 0px; border-style:none; width:180px; height:200px;">
    <form action="" method="post" id="search">
      <br>
      <select class="selmenu" id="city" name="city" style="border-style:solid; margin:0px 0px 0px 20px;">
        <option value="Novi Sad">Novi Sad</option>
        <option value="Belgrade">Belgrade</option>
        <option value="Singapore">Singapore</option>
      </select>
      <br>
      <input class="txtinput" id="minPrice" name="minPrice" placeholder="Min Price" style=" margin:10px 0px 5px 20px;" type="text">
      <br>
      <input class="txtinput" id="maxPrice" name="maxPrice" placeholder="Max Price" style=" margin:10px 0px 5px 20px;" type="text">
      <br>
      <label for="slika" style="margin:0px 0px 0px 21px; font-size:14px; font-family: Agency FB;">Onlysearch ads with picture</label>
      <input id="slika" name="slika" style=" margin:0px 0px 0px 5px;" type="checkbox">
      <br>
      <input class="submitbtn" style="margin:5px 0px 10px 20px;" type="submit" value="Search">
    </form>
  </div>
  <div id="searchbar">
    <section class="webdesigntuts-workshop">
      <form action="searchpage.php" method="post">
        <input placeholder="Search..." type="search">
        <button>Search</button>
      </form>
    </section>
  </div>
  <div id="map-canvas"></div>
</div>

jsFiddle: https://jsfiddle.net/azizn/u5ms2ftu/

2 ответа

  1. Кнопка, кажется, работает хорошо в моем случае. Даже ссылка jsFiddle, которой вы поделились, работает нормально. При нажатии на кнопку закрыть карту, класс «закрыт» добавляется в боковую панель div и даже свойство max-height добавляется к нему.

    Визуальные эффекты, которые я могу видеть, это то, что после нажатия кнопки закрыть карту боковая панель полностью исчезает, а при нажатии открыть карту она появляется полностью. Это то, что вы хотите? Или вы хотите, чтобы какая-то его часть была видимой и невидимой.??
    Потому что если вы хотите, чтобы какая-то его часть была видимой и невидимой, то вы не должны использовать slideToggle для полного класса, поскольку это заставит весь класс исчезнуть или появиться независимо от максимальной высоты или минимальной высоты.