我想使用 Jquery 创建一个带有子菜单的菜单栏。有两个带有子菜单的元素。当我单击一次时,我希望它向下滑动,当我单击第二个时,第二个需要向下滑动,但第一个或所有另一个需要向上滑动。我试过以下:
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
<a href="">ENG <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">En</a></li>
<li><a href="#">Bn</a></li>
</ul>
</li>
<li class="lang">
<a href="">USD <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">USD</a></li>
<li><a href="#">VND</a></li>
</ul>
</li>
</ul>
</div>
CSS
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
Javascript
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
最佳答案
点击将其他子菜单设置为 slideUp
fast
或 slow
并切换到下面的代码段以获取更多信息
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(".lang > ul").slideUp("fast");
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
<a href="">ENG <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">En</a></li>
<li><a href="#">Bn</a></li>
</ul>
</li>
<li class="lang">
<a href="">USD <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">USD</a></li>
<li><a href="#">VND</a></li>
</ul>
</li>
</ul>
</div>
关于javascript - 如何通过 jquery 反转对兄弟元素的操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43069612/