如何在单击特定li时隐藏所有li项目，并再次使用jquery在鼠标悬停时显示该项目下面的剩余li项目

问题描述 投票：2回答：3

我正在使用JQuery处理hide / show li。我的要求是当我点击任何li它应该显示但隐藏所有其他li项目。当我鼠标悬停在文本'显示所有列表项但不隐藏点击项'时，剩余的列表项应该低于该li使用jquery。我是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>
javascript jquery html
3个回答
0
投票

根据您提出的问题，您只想在鼠标悬停（悬停）单击的li项目时显示隐藏的li项目之后的项目。 在这种情况下：

<!DOCTYPE html>
<html>
<style>
.list_style{
list-style-type:none;
}
</style>
<body>
<span class="show_all_except_clicked"></span>
<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>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
 $(".list_style li").on('click',function(){
if($(this).hasClass("hide")){
  $(this).removeClass("hide");
  $('li').show();
  $(".show_all_except_clicked").html("");
}else{
    $(this).addClass("hide");
  $('li').not(this).hide();
  $(".show_all_except_clicked").html("<a href='#' class='show_remaining'>show all list item but don't hide clicked item </a>");
 }
});
 $(".show_all_except_clicked").hover(function(){
$("li").not(".hide").show();
},function(){
$("li").not(".hide").hide();
})

</script>
</body>
</html>

我的想法是添加一个类（假设没有其他类）隐藏li项目隐藏并以这种方式显示所有下一个li项目

1
投票

这可以通过使用简单的jquery代码添加少量css来完成。

参考下面的例子

/*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>
0
投票

希望这有帮助。将鼠标悬停功能添加到脚本中的li：

$(".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>");
});

$(".list_style li").mouseover(function(){
  $('li', $(this).closest('ul')).not(this).show();
});

您可以在codepen中查看结果：https://codepen.io/anon/pen/qMJLye

热门问题
推荐问题
最新问题