Chris Lnrd Chris Lnrd - 3 months ago 10
jQuery Question

check if current object is clicked object for multi level list

im trying to make a multi level expandable list (with 3 levels) in jquery myself.
whenever a level is expanded, i want all the other expandable lists, which are not parents of the clicked item, to collapse. unfortunately i dont manage to make that happen, whenever i click on a second-level menu item, not only all other menus collapse, but also the parent of the clicked item (so i cannot see the third level menu of the clicked element).

here my code



$(".expandable a").click(function(event) {
event.preventDefault();
//check if the clicked item is an expandable
if ($(this).parent('li').hasClass("expandable")) {
//check if anmation still running
if (!$(this).next('ul').is(':animated')) {
//check if is expanded already or not
if ($(this).next('ul').is(":visible") == true) {
//hide content
$(this).next('ul').slideUp(200, function() {
// Animation complete.
});
} else {
var clicked_obj = $(this);

//hide all other contents
$(".expandable a").each(function(index) {

//check if current object is child of the clicked object, in that case dont collapse
if ($(this).find('.expandable').find('a').is(clicked_obj)) {
//dont collapse this one
} else {
$(this).next('ul').slideUp(200, function() {
// Animation complete.
});
}
});
//show content
$(this).next('ul').slideDown(200, function() {
// Animation complete.
});
};
};
};
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">

<li>
<a href=""><i class="fa fa-home fa-fw list-icon"></i>Overview</a>
</li>
<li class="expandable">
<a><i class="fa fa-file fa-fw list-icon"></i>Files<i class="fa fa-angle-left pull-right"></i></a>
<ul class="nav">

<li>
<a href="">Second level Link</a>
</li>

<li class="expandable">
<a href="">Second level menu<i class="fa fa-angle-left pull-right"></i></a>
<ul class="nav">
<li>
<a href="">Third Level Link</a>
</li>
<li>
<a href="">Third Level Link<</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href=""><i class="fa fa-user-plus list-icon"></i>User Requests</a>
</li>
<li>
<a href=""><i class="fa fa-bar-chart-o fa-fw list-icon"></i>Statistics</a>
</li>
<li class="admin_menu expandable">
<a href=""><i class="fa fa-key fa-fw list-icon"></i>Administration<i class="fa fa-angle-left pull-right"></i></a>
<ul class="nav">
<li>
<a href="">Second Level Link</a>
</li>

<li class="expandable">
<a href="">Second Level Menu<i class="fa fa-angle-left pull-right"></i></a>
<ul class="nav">
<li>
<a href="">Third Level Link<</a>
</li>
<li>
<a href="">Third Level Link<</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>





the code works, except of this "if":

//check if current object is child of the clicked object, in that case dont collapse
if ($(this).find('.expandable').find('a').is(clicked_obj)){...


i hope somebody can help me make my menu work properly..
thanks in advance!

Answer

I think the best code is the shortest one so i made this in another way. This universal code works for as many levels as you want.

$(document).ready(function (){

// Hide all expandables menus at start
$('.expandable ul').hide();

// When click on .expandable > a element
$('.expandable > a').click(function(e) {
	
	// Close all expandable, excluding current parents and siblings
	$('.expandable ul')
		.not($(this).parents('ul'))
		.not($(this).siblings('ul'))
		.stop(true,true)
		.slideUp();

	// Toggle current submenu
	$(this)
		.next('ul')
		.stop(true,true)
		.slideToggle();
	
	return false;
});	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">

  <li>
    <a href=""><i class="fa fa-home fa-fw list-icon"></i>Overview</a>
  </li>
  <li class="expandable">
    <a href=""><i class="fa fa-file fa-fw list-icon"></i>Files<i class="fa fa-angle-left pull-right"></i></a>
    <ul class="nav">

      <li>
        <a href="">Second level Link</a>
      </li>

      <li class="expandable">
        <a href="">Second level menu<i class="fa fa-angle-left pull-right"></i></a>
        <ul class="nav">
          <li>
            <a href="">Third Level Link</a>
          </li>
          <li>
            <a href="">Third Level Link</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href=""><i class="fa fa-user-plus list-icon"></i>User Requests</a>
  </li>
  <li>
    <a href=""><i class="fa fa-bar-chart-o fa-fw list-icon"></i>Statistics</a>
  </li>
  <li class="admin_menu expandable">
    <a href=""><i class="fa fa-key fa-fw list-icon"></i>Administration<i class="fa fa-angle-left pull-right"></i></a>
    <ul class="nav">
      <li>
        <a href="">Second Level Link</a>
      </li>

      <li class="expandable">
        <a href="">Second Level Menu<i class="fa fa-angle-left pull-right"></i></a>
        <ul class="nav">
          <li>
            <a href="">Third Level Link</a>
          </li>
          <li>
            <a href="">Third Level Link</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>