[英]jquery .slidetoggle() and .toggle() together, first click does nothing then works after that
[英]toggle function works but not slideToggle in jQuery
我正在嘗試使slideToggle
工作,但無法弄清楚。 根據不同的答案,我嘗試添加display: block
和display: none
但這也不起作用。
JSFiddle 演示: https ://jsfiddle.net/987cndtv/
JS:
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").slideToggle();
/* jQuery(this).next("ul").toggle(); */
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
CSS:
.menupolicies .parent {
padding: 5px 0;
display: block;
}
.menupolicies .parent ul {
display: none;
}
問題在於您正在使用的 jQuery 版本 ( 3.3.1.slim.min.js ) 沒有slideToggle()
所需的動畫效果。 嘗試使用其他版本:
jQuery(".menupolicies .parent ul").hide(); jQuery(".menupolicies>li>ul").show(); jQuery(".menupolicies .parent > span").click(function() { jQuery(this).next("ul").slideToggle(); //jQuery(this).next("ul").toggle(); }); jQuery(".menupolicies .parent .nav-header").click(function(e) { jQuery(this).find("img").toggleClass( "arrow" ); });
.hide { display: none; } .menupolicies>li { width: 100%; } .menupolicies .parent { padding: 5px 0; display: block; } .menupolicies .parent ul { display: none; } .menupolicies a, .menupolicies li { font-size: 14px; color: #333; } .menupolicies .active { font-weight: bold; } .nav { margin-bottom: 0; padding-left: 0; list-style: none; } .menupolicies .parent span img { width: 24px; float: right; } .menupolicies .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="moduletable"> <ul class="nav menupolicies"> <li class="active deeper parent"><span class="nav-header hide">Market</span> <ul class="nav-child unstyled small"> <li class="deeper parent"><a href="/market/terms">Terms 1</a></li> <li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span> <ul class="nav-child unstyled small"> <li class=""><a href="/market/terms/termsa">Terms A</a></li> <li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span> <ul class="nav-child unstyled small"> <li class=""><a href="/market/terms/termsb/i">Terms I</a></li> <li class="current active"><a href="/market/terms/termsa/ii">Terms II</a></li> <li class=""><a href="/market/terms/termsa/iii">Terms III</a></li> </ul> </li> </ul> </li> <li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span> <ul class="nav-child unstyled small"> <li class=""><a href="/market/terms3/i">Terms I</a></li> </ul> </li> </ul> </li> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.