Javascript 如何在单击特定li时隐藏所有li项，并使用jquery在鼠标上方再次显示该项下方的剩余li项_Javascript_Jquery_Html

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

javascript jquery html

Javascript 如何在单击特定li时隐藏所有li项，并使用jquery在鼠标上方再次显示该项下方的剩余li项,javascript,jquery,html,Javascript,Jquery,Html,我正在使用JQuery进行隐藏/显示li。我的要求是，当我单击任何li时，它应显示但隐藏所有其他li项。当我将鼠标悬停在文本“显示所有列表项但不隐藏单击的项””上时，剩余的列表项应使用jquery位于该li项的下方。我是JQuery的新手，所以我没有太多的想法，下一步要做什么 <!DOCTYPE html> <html> <style> .list_style{ list-style-type:none; } </style> <body&g

我正在使用JQuery进行隐藏/显示

li

。我的要求是，当我单击任何

li

时，它应显示但隐藏所有其他

li

项。当我将鼠标悬停在文本“显示所有列表项但不隐藏单击的项””上时，剩余的列表项应使用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>


.list_样式{
列表样式类型：无；
}
无序列表：

菜单1
菜单2
菜单3
菜单4

$（“.list_style li”）。在（'click'，function（）上{
$（'li'，$（this.closest（'ul'））.not（this.hide（）；
$（“.show_all_，单击除外”）.html（“”）；
});

希望这有帮助。将mouseover函数添加到脚本中的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();
});

$（“.list_style li”）。在（'click'，function（）上{
$（'li'，$（this.closest（'ul'））.not（this.hide（）；
$（“.show_all_，单击除外”）.html（“”）；
});
$（“.list_style li”）.mouseover（函数（）{
$（'li'，$（this.closest（'ul'））.not（this.show（）；
});

您可以在代码笔中检查结果：

根据您提出的问题，当鼠标悬停在单击的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>


.list_样式{
列表样式类型：无；
}
无序列表：

菜单1
菜单2
菜单3
菜单4

$（“.list_style li”）。在（'click'，function（）上{
if（$（this.hasClass（“隐藏”））{
$（this.removeClass（“隐藏”）；
$（'li'）.show（）；
$（“.show_all_，单击除外”）.html（“”）；
}否则{
$（this.addClass（“hide”）；
$（'li'）。不是（this.hide（）；
$（“.show_all_，单击除外”）.html（“”）；
}
});
$（“.show_all_，单击除外”）。悬停（函数（）{
$（“li”）.not（“.hide”）.show（）；
}，函数（）{
$（“li”）.not（“.hide”）.hide（）；
})

我的想法是添加一个类（假设没有其他类）来隐藏隐藏li项，并以这种方式显示所有下一个li项。这可以通过使用简单的jquery代码添加一些css来完成。
参考下面的例子

/*我添加了2个选择器*/ $（“.show hide，.menu”）.hover（函数（）{ $（'.menu'）.toggleClass（'active'）； }); $（“.menu li”）。在（'click'，function（）上{ $（this.addClass（'active'）.sides（）.removeClass（'active'）； }); 菜单{ 位置：相对位置；列表样式类型：无；填充顶部：30px；左侧填充：0；身高：0；溢出：隐藏； } .menu.active{ 高度：自动； } 李先生{ 高度：30px；宽度：100%； } .菜单li.active{ 位置：绝对位置；排名：0；左：0； } 显示/隐藏菜单1 菜单2 菜单3 菜单4 看看这个：@gitguddoge from list item假设当我点击item1 hide（item2，item3，item4）时，当鼠标移动到文本上时，如果我点击鼠标上方的item2 hide（item1，item3，item4），它现在应该再次显示item2，item3，item4item@Anonymous所以你的意思是当你点击项目2时，它必须显示项目3，项目4当鼠标悬停时？@gitgudoge是的，请告诉我这个问题的解决方案，我对jquery是新手，所以进一步的过程我不知道尝试一个“手风琴”，但带有“鼠标悬停”功能-但鼠标悬停功能不起作用，我的意思是鼠标悬停隐藏项目当我点击列表项目3，鼠标悬停在文本上时，它不会显示1,2,4列表项目AH i误解了你的问题，让我来解决it@Anonymous重试againit正在工作，只需要从悬停列表中得到您的帮助，如果我再次单击该项目，则上一个项目将被此项目替换，上一个项目将进入list@Anonymous你可以根据你想要的内容来尝试最新的编辑