Q:

How to hide all li items when clicked on perticular li and again show remaining li item below that items on mouseover using jquery

I am working on hide/show li using JQuery. My requirement is that when I click on any li it should display but hide all other li items.When I mouseover on a text 'show all list item but don't hide clicked item', the remaining list item should come below of that li using jquery. I am new to JQuery so don't have that much idea and what is the next process to do this?
<!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>

A:

Based on your asked question you only intend to show the items after the hidden li item when mouseover(hover) the clicked li item. In this case:
<!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>

My idea is to add a class (assuming there are no other classes) which is hide for the hiding li item and show all the next li item in such way

