我正在使用 JQuery 隐藏/显示 li。我的要求是，当我点击任何 li 时，它应该显示但隐藏所有其他 li 项目。当我将鼠标悬停在文本上时 'show all list item but don 'hide clicked item'，剩余的列表项应该使用 jquery 位于 li 的下方。我是 JQuery 的新手，所以不太了解接下来的流程是什么？
<!DOCTYPE html>
<html>
<style>
.list_style{
list-style-type:none;
}
</style>
<body>
<h4>An Unordered List:</h4>
<ul class="list_style">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<span class="show_all_except_clicked"></span>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(".list_style li").on('click',function(){
$('li', $(this).closest('ul')).not(this).hide();
$(".show_all_except_clicked").html("<a href='#' class='show_remaining'>show all list item but don't hide clicked item </a>");
});
</script>
</body>
</html>
最佳答案
这可以通过使用简单的 jquery 代码添加一些 css 来完成。
Refer below example
/*I have added 2 selectors*/
$(".show-hide, .menu").hover(function() {
$('.menu').toggleClass('active');
});
$(".menu li").on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
});.menu {
position: relative;
list-style-type: none;
padding-top: 30px;
padding-left: 0;
height: 0;
overflow: hidden;
}
.menu.active {
height: auto;
}
.menu li {
height: 30px;
width: 100%;
}
.menu li.active {
position: absolute;
top: 0;
left: 0;
}<!DOCTYPE html>
<html>
<body>
<span class="show-hide">show / hide</span>
<ul class="menu">
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</body>
</html>关于javascript - 如何在单击特定 li 时隐藏所有 li 项目，并使用 jquery 在鼠标悬停时再次显示该项目下方的剩余 li 项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52378203/