How to hide the drop down menu list item

Question

I've created a simple menu using jQuery. Once I click the menu item it shows a dropdown menu so how do I make the current menu item to display and previously opened menu to hide automatically once clicked?

[Code Pen][1]

[1]: http://codepen.io/firnasfaris10/pen/mVVKvd

Answer 1

Try this :

    $('.nav li a').click(
      function () { //appearing on hover
 $(this).closest('.nav').find('ul').not($(this).closest('ul')).slideUp();
        $(this).next('ul').slideToggle();

      }
    );
$('body').click(function(e){
  if ($(e.target).closest('.nav').length == 0) {
    $('.nav ul').slideUp();
  };
});

http://codepen.io/anon/pen/EPKYyv

Answer 2

$('.nav li').on('click', function(ev) {
  $(this).find('> ul').slideToggle();
  $(this).siblings('li').children('ul').slideUp();
  ev.stopPropagation();
});

.nav {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.nav li {
  float: left;
  width: 160px;
  position: relative;
}
.nav li a {
  background: #333;
  color: #fff;
  display: block;
  padding: 7px 8px;
  text-decoration: none;
  border-top: 1px solid #069;
}
.nav li a:hover {
  color: #069;
}
/*=== submenu ===*/

.nav ul {
  display: none;
  position: absolute;
  margin-left: 0px;
  list-style: none;
  padding: 0px;
}
.nav ul ul {
  left: 100%;
  top: 0;
}
.nav ul li {
  width: 160px;
  float: left;
}
.nav ul a {
  display: block;
  height: 15px;
  padding: 7px 8px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #222;
}
.nav ul li a:hover {
  color: #069;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul class="nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li><a href="#">Consulting</a>
        </li>
        <li><a href="#">Sales</a>
        </li>
        <li><a href="#">Support</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">About Us</a>
      <ul>
        <li><a href="#">Contact Information</a>
          <ul>
            <li><a href="#">Company</a>
            </li>
            <li><a href="#">Mission</a>
            </li>
            <li><a href="#">Contact Information</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

try this in js:

<script type="text/javascript">
$(function () {
    $('.nav li').hover(
        function () { //appearing on hover
            $(".nav li").find("ul").hide();
            $(this).find('ul').slideToggle();

            // $(this).parent().find('li').find('ul').slideToggle();
        },
        function () { //disappearing on hover
            $(this).find('ul').slideToggle();
            $(this).find('li').children('ul').slideToggle();
        }
    );    
});    
</script>

Answer 4

HI now you can try to this jquery code .

$(document).ready(function(){
    
  $('.nav > li').click(function(){
    $('.nav > li ul').slideUp();  
    if ($(this).find('ul').is(":visible")){
$(this).find('ul').slideUp(300);
}else{

$(this).find('ul').slideDown(300);    
}
  });

});

.nav {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.nav li {
	float: left;
	width: 160px;
	position: relative;
}

.nav li a {
	background: #333;
	color: #fff;
	display: block;
	padding: 7px 8px;
	text-decoration: none;
	border-top: 1px solid #069;
}

.nav li a:hover {
	color: #069;
}

/*=== submenu ===*/

.nav  li ul {
	display: none;
	position: absolute;
	margin-left: 0px;
	list-style: none;
	padding: 0px;
}

.nav ul li {
	width: 160px;
	float: left;
}

.nav ul a {
	display: block;
	height: 15px;
	padding: 7px 8px;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #222;
}

.nav ul li a:hover {
	color: #069;
  font-size:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navigation">
  		<ul class="nav">
  			<li>
  				<a href="#">Home</a>
  			</li>
  			<li>
  				<a href="#">Services</a>
  				<ul>
  					<li><a href="#">Consulting</a></li>
  					<li><a href="#">Sales</a></li>
  					<li><a href="#">Support</a></li>
  				</ul>
  			</li>
  			<li>
  				<a href="#">About Us</a>
  				<ul>
  					<li><a href="#">Company</a></li>
  					<li><a href="#">Mission</a></li>
  					<li><a href="#">Contact Information</a></li>
  				</ul>
  			</li>
  		</ul>
  	</div>