jQuery toggleClass無法正常工作（close div）

我希望有一個按鈕在點擊時切換div（邊欄）類。該班級應通過將max-height設置爲130px來關閉側邊欄。jQuery toggleClass無法正常工作（close div）

這是我迄今爲止嘗試，但由於某種原因，它不是爲我工作：

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/

來源

2016-05-01 user3379528

按鈕似乎很好地工作在我的情況。即使你分享的jsFiddle鏈接工作正常。點擊CLOSE MAP按鈕後，一個類「closed」被添加到側欄div，甚至max-height屬性也被添加到它。

我可以看到的視覺效果是，點擊關閉地圖按鈕後，邊欄完全消失，點擊打開地圖後，它會完全顯示。這是你想要的嗎？或者你想讓它的一部分可見和不可見？因爲如果你想讓它的某些部分變得可見和不可見，那麼你不應該使用slideToggle來完成整個班級，因爲它會使整個班級消失或出現，無論最大高度還是最小高度。

來源

2016-05-01 07:53:27

您需要添加下面的這個工作：

.closed { 
    overflow: hidden; 
    ... 
}

來源

2016-05-01 07:56:21

jQuery toggleClass無法正常工作（close div）

回答

相關問題