我正在尝试使 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>
关于javascript - 切换功能有效但 slideToggle 在 jQuery 中无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56616179/