CODEWITHSUNDEEP
jquery
Sachin
Sachin

Reputation: 1698

How to close/hide previously opened ul li in jQuery?

I am trying to build custom accordion type navigation menu in which when we click on parent list item then its nested ul li items are displayed. They are hidden when we click again on its parent li item. But one thing which is creating problem is I also want to close or hide any previously opened ul list items if any. I don't know how to make it perfect - my solutions are not working 100% correct.

My code is:

HTML

<div id="header_wrapper"> <!-- HEADER WRAPPER STARTS -->

    <div id="header"> <!-- HEADER STARTS -->

        <div id="logo"> <!-- LOGO STARTS -->
            <a href="#"><img src="images/logo.png" alt="logo" class="responsive" /></a>
        </div> <!-- LOGO ENDS -->

    <div id="nav_wrapper"> <!-- NAVIGATION WRAPPER STARTS -->

            <div id="menu_icon_wrapper">
                <div id="menu_icon"></div>
            </div>

        <div id="nav_bar"> <!-- NAVIGATION BAR STARTS -->

            <ul id="nav"> <!-- NAVIGATION STARTS -->
                <li><a href="#">Item 1</a>
                    <ul>
                        <li><a href="#">Sub Item 1</a></li>
                        <li><a href="#">Sub Item 2</a></li>
                        <li><a href="#">Sub Item 3</a></li>
                        <li><a href="#">Sub Item 4</a></li>
                        <li><a href="#">Sub Item 5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="active">Item 2</a></li>
                <li><a href="#">Item 3</a>
                    <ul>
                        <li><a href="#">Sub Item 1</a></li>
                        <li><a href="#">Sub Item 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a>
                    <ul>
                        <li><a href="#">Sub Item 1</a></li>
                        <li><a href="#">Sub Item 2</a></li>
                        <li><a href="#">Sub Item 3</a></li>
                    </ul>
                </li>
            </ul> <!-- NAVIGATION ENDS -->

        </div> <!-- NAVIGATION BAR ENDS -->

    </div> <!-- NAVIGATION WRAPPER ENDS -->

    <div class="clearfix"></div>

    </div> <!-- HEADER ENDS -->

</div> <!-- HEADER WRAPPER ENDS -->

CSS

#header_wrapper {
    background-color:red;
    width:100%;
}

#header {
    max-width:1000px;
    margin:0 auto;
    padding:10px 0;
    position:relative;
}

#logo {
    /*float:left;*/
}


#nav_bar {
    position:relative;
    z-index:99999;
    background-color:#F34744;
}

#nav_bar ul li a {
    background-color:#F34744;
    border-top:1px solid #EE312D;
    padding:6px 12px;
    display:block;
    color:#FFFFFF;
    font-size:14px;
    outline:none;
    text-align:left;
}

#nav_bar ul li a:hover,
#nav_bar ul li a.active {
    background-color:#EE312D;
}

#nav_bar ul li ul li a {
    text-indent:25px;
    background-color:#F45d5A;
}

#nav_bar ul li ul {
    display:none;
}

#nav_bar ul li ul.inner_dd {
    display:block;
}

/* main nav */
ul#nav {
    display:none; /* visibility will be toggled with jquery */
}

/* menu icon */
#menu_icon_wrapper {
    position:relative;
    height:24px;
}

#menu_icon {
    background-color:blue;
    background-repeat:no-repeat;
    width:45px;
    height:45px;
    position:absolute;
    top:-21px;
    right:-1px;
    cursor:pointer;
}

#menu_icon:hover {
    /*background-color:#dd7d06;*/
}

#menu_icon.active {
    /*background-color:#EE312D;*/
}

@media only screen and (min-width:900px) {

#header_wrapper {
    border-top:5px solid yellow;
}

#nav_wrapper {
    position:absolute;
    bottom:40px;
    right:0;
}

#menu_icon_wrapper {
    display:none; /* hide menu icon initially */
}

/* Ensure #nav is visible on desktop version */
ul#nav {
    display:block !important;
}

#nav_bar ul li {
    float:left;
    position:relative;
    margin-right:35px;
}

#nav_bar ul li a
{
    border-top:none;
    background-color:transparent;
    padding:0;
    color:#666666;
    display:block;
    font-size:15px;
}

#nav_bar ul li:last-child {
    margin-right:0;
}

#nav_bar ul li a.active,
#nav_bar ul li a:hover {
    color:#000000;
    background-color:transparent;
}

#nav_bar ul li a.active {
    /*border-bottom:2px solid #EE312D;*/
}

/* dropdown menu */

#nav_bar ul li ul {
    display:none;
    position:absolute;
    left:0;
    top:24px;
    border:1px solid #666666;
    background-color:#F8F8F8;
}

/* Display dropdown menu on hover */

#nav_bar ul li ul.inner_dd {
    display:none;
}

#nav_bar ul li:hover ul {
    display:block; 
}

#nav_bar ul li ul li {
    float:none;
    z-index:99999;
    margin-right:0;
}

#nav_bar ul li ul li a {
    text-indent:inherit;
    background-color:transparent;
    display:block;
    white-space:nowrap;
    padding:0 10px;
    font-size:14px;
}

#nav_bar ul li ul li a:hover {
    background-color:#EEEEEE;
}

}

jQuery

// Toggle navigation
$("#menu_icon").on("click", function(){
    $("ul#nav").slideToggle();
    $(this).toggleClass("active");
});

// Show/hide dropdown menu
$("ul#nav li a").click(function(e){
    if($(this).closest("li").children("ul").length != 0)
    {
        if($(window).innerWidth() < 900)
        {
            e.preventDefault();
            $(this).siblings('ul').toggleClass('inner_dd');
        }
    }
});

Here's my so far working code in working action.

In demo, when you click on blue square, then drop down menu appears. I want "item 1" to be closed when we open "item 3" and vice-versa. Similar action for other menu item.

Upvotes: 0

Views: 114

Answers (3)

Pete
Pete

Reputation: 58462

I would do it like this:

var nav = $("ul#nav"),
  subNavs = nav.children('li').children('ul');

// Toggle navigation
$("#menu_icon").on("click", function() {
  nav.slideToggle();
  $(this).toggleClass("active");
});

// Show/hide dropdown menu
$("ul#nav li a").click(function(e) {
  var anchor = $(this),
    subNav = anchor.next("ul");

  if (subNav.length != 0 && $(window).innerWidth() < 900) {
    e.preventDefault();
    subNav.toggleClass('inner_dd');
    subNavs.not(subNav).removeClass('inner_dd');
  }
});
	#header_wrapper {
	  background-color: red;
	  width: 100%;
	}
	
	#header {
	  max-width: 1000px;
	  margin: 0 auto;
	  padding: 10px 0;
	  position: relative;
	}
	
	#logo {
	  /*float:left;*/
	}
	/* -----------------------------------------------------------------------------
	
		TOP NAVIGATION
	  
	----------------------------------------------------------------------------- */
	
	#nav_bar {
	  position: relative;
	  z-index: 99999;
	  background-color: #F34744;
	}
	
	#nav_bar ul li a {
	  background-color: #F34744;
	  border-top: 1px solid #EE312D;
	  padding: 6px 12px;
	  display: block;
	  color: #FFFFFF;
	  font-size: 14px;
	  outline: none;
	  text-align: left;
	}
	
	#nav_bar ul li a:hover,
	#nav_bar ul li a.active {
	  background-color: #EE312D;
	}
	
	#nav_bar ul li ul li a {
	  text-indent: 25px;
	  background-color: #F45d5A;
	}
	
	#nav_bar ul li ul {
	  display: none;
	}
	
	#nav_bar ul li ul.inner_dd {
	  display: block;
	}
	/* main nav */
	
	ul#nav {
	  display: none;
	  /* visibility will be toggled with jquery */
	}
	/* menu icon */
	
	#menu_icon_wrapper {
	  position: relative;
	  height: 24px;
	}
	
	#menu_icon {
	  background-color: blue;
	  background-repeat: no-repeat;
	  width: 45px;
	  height: 45px;
	  position: absolute;
	  top: -21px;
	  right: -1px;
	  cursor: pointer;
	}
	
	#menu_icon:hover {
	  /*background-color:#dd7d06;*/
	}
	
	#menu_icon.active {
	  /*background-color:#EE312D;*/
	}
	/* -----------------------------------------------------------------------------

	MEDIA QUERIES FOR A RESPONSIVE LAYOUT (MOBILE FIRST)
  
----------------------------------------------------------------------------- */
	/* -----------------------------------------------------------------------------

	LARGER THAN 900
  
----------------------------------------------------------------------------- */
	
	@media only screen and (min-width:900px) {
	  #header_wrapper {
	    border-top: 5px solid yellow;
	  }
	  #nav_wrapper {
	    position: absolute;
	    bottom: 40px;
	    right: 0;
	  }
	  #menu_icon_wrapper {
	    display: none;
	    /* hide menu icon initially */
	  }
	  /* Ensure #nav is visible on desktop version */
	  ul#nav {
	    display: block !important;
	  }
	  #nav_bar ul li {
	    float: left;
	    position: relative;
	    margin-right: 35px;
	  }
	  #nav_bar ul li a {
	    border-top: none;
	    background-color: transparent;
	    padding: 0;
	    color: #666666;
	    display: block;
	    font-size: 15px;
	  }
	  #nav_bar ul li:last-child {
	    margin-right: 0;
	  }
	  #nav_bar ul li a.active,
	  #nav_bar ul li a:hover {
	    color: #000000;
	    background-color: transparent;
	  }
	  #nav_bar ul li a.active {
	    /*border-bottom:2px solid #EE312D;*/
	  }
	  /* dropdown menu */
	  #nav_bar ul li ul {
	    display: none;
	    position: absolute;
	    left: 0;
	    top: 24px;
	    border: 1px solid #666666;
	    background-color: #F8F8F8;
	  }
	  /* Display dropdown menu on hover */
	  #nav_bar ul li ul.inner_dd {
	    display: none;
	  }
	  #nav_bar ul li:hover ul {
	    display: block;
	  }
	  #nav_bar ul li ul li {
	    float: none;
	    z-index: 99999;
	    margin-right: 0;
	  }
	  #nav_bar ul li ul li a {
	    text-indent: inherit;
	    background-color: transparent;
	    display: block;
	    white-space: nowrap;
	    padding: 0 10px;
	    font-size: 14px;
	  }
	  #nav_bar ul li ul li a:hover {
	    background-color: #EEEEEE;
	  }
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
  <!-- HEADER WRAPPER STARTS -->

  <div id="header">
    <!-- HEADER STARTS -->

    <div id="logo">
      <!-- LOGO STARTS -->
      <a href="#"><img src="images/logo.png" alt="logo" class="responsive" /></a>
    </div>
    <!-- LOGO ENDS -->

    <div id="nav_wrapper">
      <!-- NAVIGATION WRAPPER STARTS -->

      <div id="menu_icon_wrapper">
        <div id="menu_icon"></div>
      </div>

      <div id="nav_bar">
        <!-- NAVIGATION BAR STARTS -->

        <ul id="nav">
          <!-- NAVIGATION STARTS -->
          <li><a href="#">Item 1</a>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
              <li><a href="#">Sub Item 3</a></li>
              <li><a href="#">Sub Item 4</a></li>
              <li><a href="#">Sub Item 5</a></li>
            </ul>
          </li>
          <li><a href="#" class="active">Item 2</a></li>
          <li><a href="#">Item 3</a>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a>
            <ul>
              <li><a href="#">Sub Item 1</a></li>
              <li><a href="#">Sub Item 2</a></li>
              <li><a href="#">Sub Item 3</a></li>
            </ul>
          </li>
        </ul>
        <!-- NAVIGATION ENDS -->

      </div>
      <!-- NAVIGATION BAR ENDS -->

    </div>
    <!-- NAVIGATION WRAPPER ENDS -->

    <div class="clearfix"></div>

  </div>
  <!-- HEADER ENDS -->

</div>
<!-- HEADER WRAPPER ENDS -->

Upvotes: 1

warch
warch

Reputation: 2609

you just could do this:

$("ul#nav li a").click(function(e){
    if($(this).closest("li").children("ul").length != 0)
    {
        if($(window).innerWidth() < 900)
        {
            e.preventDefault();
            $('ul').removeClass('inner_dd');
            $(this).siblings('ul').toggleClass('inner_dd');
        }
    }
});

you may add a class to each 'ul' element. this allows you just remove the inner_dd class from the 'ul' elements you want:

e.g.:

<ul class="myclass">...</ul>

JS:

$('.myclass').removeClass('inner_dd');

Fiddle: https://jsfiddle.net/4t006rpg/2/

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281932

You need to remove the class inner_dd from the other li elements add this piece of code to do the same

   $('ul').removeClass('inner_dd')

Complete jquery code

            // Toggle navigation
    $("#menu_icon").on("click", function(){
        $("ul#nav").slideToggle();
        $(this).toggleClass("active");
    });

    // Show/hide dropdown menu
    $("ul#nav li a").click(function(e){
        if($(this).closest("li").children("ul").length != 0)
        {
            if($(window).innerWidth() < 900)
            {
                e.preventDefault();
      $('ul').removeClass('inner_dd')
                $(this).siblings('ul').toggleClass('inner_dd');
            }

        }
    });

JSFIDDLE

Upvotes: 0

Related Questions