jQuery toggleClassが正しく動作しません（divを閉じる）

Question

クリックするとdivのサイドバーを切り替えるボタンがあります。クラスはをのmax-heightを130pxに設定してサイドバーを閉じる必要があります。

これは私がこれまで試してみましたが、何らかの理由で、それは私のために働いていないものです。

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/

Answer 1

ボタンで正常に動作するようです私の場合。あなたが共有しているjsFiddleリンクさえもうまくいきます。 CLOSE MAPボタンをクリックすると、サイドバーdivにクラス "closed"が追加され、さらにmax-heightプロパティが追加されます。

私が見ることができるビジュアルは、[閉じる]ボタンをクリックするとサイドバーが完全に消え、OPEN MAPをクリックすると完全に表示されることです。それはあなたが望むものですか？または、その一部を目に見えるようにしたいのですか？ Cozクラスの一部を表示して非表示にしたい場合は、クラス全体を非表示にするか、max-heightまたはmin-heightに関係なく表示されるため、完全なクラスに対してはslideToggleを使用しないでください。

Answer 2

あなたが仕事に、このために以下を追加する必要があります。

.closed { 
    overflow: hidden; 
    ... 
}