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）

回答

相关问题