jQuery submenu not displaying correctly

Question

Here is my code here first menu working properly but when applied sub sub menu it's conflicting with previous li. You can check there is a list under food report . when clicking that child is not displaying.

$(document).ready(function() {
  $(".menu_li").click(function() {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      $('.child_ul').hide('slow');
      $(this).children().children('.plus').show();
      $(this).children().children('.minus').hide();
    } else {


      $(".menu_li").removeClass('selected');
      $('.child_ul').hide('slow');
      $(this).addClass('selected');
      $('.plus').show();
      $('.minus').hide();
      $(this).children('.child_ul').show('slow');
      $(this).children().children('.plus').hide();
      $(this).children().children('.minus').show();

    }
  });
  $(".menu_li1").click(function() {
    
    if ($(".menu_li1").hasClass('selected')) {
      $(".menu_li1").removeClass('selected');
      $('.child_ul1').hide('slow');
      $(".menu_li1").children('.child_ul1').children('.plus1').show();
      $(".menu_li1").children('.child_ul1').children('.minus1').hide();
    } else {


      $(".menu_li1").removeClass('selected');
      $('.child_ul1').hide('slow');
      $(".menu_li1").addClass('selected');
      $('.plus1').show();
      $('.minus1').hide();
      $(".menu_li1").children('.child_ul1').show('slow');
      $(".menu_li1").children('.child_ul1').children('.plus1').hide();
      $(".menu_li1").children('.child_ul1').children('.minus1').show();

    }
  });

});

.child_ul,
.child_ul1 {
  display: none;
}
.left_menu ul li {
  cursor: pointer;
}
.child_ul li,
.child_ul1 li {
  border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
  border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
  background: #272525 none repeat scroll 0% 0% !important;
  border-bottom: 1px solid #222;
}
.plus {
  float: right;
  margin-right: 5px;
}
.minus {
  float: right;
  margin-right: 5px;
}
ul li a {
  background: #373737;
  height: 30px;
  padding-top: 14px;
  display: block;
  color: #949494;
  text-decoration: none;
  padding-left: 30px;
  border-top: 1px solid #2f2f2f;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
  <a>input form
	<span class='plus'><img src='plus.png'></span>
	<span class='minus' style='display:none'></span>
  </a>
  <ul class='child_ul'>

    
    <li>
      <a href="./food_for_work.php">কাজের বিনিময়ে খাদ্য</a>
    </li>

    <li>
      <a href="./bridge_culvert.php">  সেতু কালভারট</a>
    </li>
    <li>
      <a href="./cyclone_shelter_center.php">ঘূর্ণিঝড় আস্রয় কেন্দ্র</a>
    </li>
   
  </ul>
</li>
<li class='menu_li'>
  <a>Report
	<span class='plus'><img src='plus.png'></span>
	<span class='minus' style='display:none'><img src='minus.png'></span>
  </a>
  <ul class='child_ul'>
    <li class='menu_li1'>
      
      <a>food report
		<span class='plus1'><img src='plus.png'></span>
		<span class='minus1' style='display:none'><img src='minus.png'></span>
	  </a>
      <ul class='child_ul1'>


        <li>
          <a href="./report_food_for_work.php">কাজের বিনিময়ে খাদ্য সাধারণ </a>
        </li>

        <li>
          <a href="./report_food_for_work_summery.php">কাজের বিনিময়ে খাদ্য সমন্নিত </a>
        </li>


      </ul>
    </li>

    <li>
      <a href="./report_backlog.php">  রিপোর্ট আর্কাইভ</a>
    </li>
  </ul>
</li>

When creating the live demo, DON"T include PHP. use the generated HTML. — Tushar
– Tushar, Commented Jan 24, 2016 at 6:57
event propagation is the culprit. use event.stopPropagation() or check the target of the click event, before showing/hiding elements — Ankit Saroch
– Ankit Saroch, Commented Jan 24, 2016 at 7:01

Lemon Kazi · Accepted Answer · 2016-01-24 14:56:50Z

Thanks Tushar your comment helped me. I solved my problem I placed event.stopPropagation(); for my sub sub menu section then it worked properly. So I placed my own answer with snippet if it helped others.

$(".menu_li").click(function(event){

  //$('.child_ul').hide('slow');
  //$(this).children('.child_ul').toggle('slow');
  if ($(this).hasClass('selected')) 
  {
    $(this).removeClass('selected');
    $('.child_ul').hide('slow');
    $(this).children().children('.plus').show();
    $(this).children().children('.minus').hide();
  }else {


    $(".menu_li").removeClass('selected');
    $('.child_ul').hide('slow');
    $(this).addClass('selected');
    $('.plus').show();
    $('.minus').hide();
    $(this).children('.child_ul').show('slow');
    $(this).children().children('.plus').hide();
    $(this).children().children('.minus').show();

  }
});
$(".menu_li1").click(function(event){
  //event.preventDefault(); 

  event.stopPropagation();
  console.log('brick me!'); 
  //$('.child_ul').hide('slow');
  //$(this).children('.child_ul').toggle('slow');
  if ($(this).hasClass('selected')) 
  {
    $(this).removeClass('selected');
    $('.child_ul1').hide('slow');
    $(this).children('.child_ul1').children('.plus1').show();
    $(this).children('.child_ul1').children('.minus1').hide();
  }else {


    $(".menu_li1").removeClass('selected');
    $('.child_ul1').hide('slow');
    $(this).addClass('selected');
    $('.plus1').show();
    $('.minus1').hide();
    $(this).children('.child_ul1').show('slow');
    $(this).children('.child_ul1').children('.plus1').hide();
    $(this).children('.child_ul1').children('.minus1').show();

  }
});

.child_ul,
.child_ul1 {
  display: none;
}
.left_menu ul li {
  cursor: pointer;
}
.child_ul li,
.child_ul1 li {
  border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
  border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
  background: #272525 none repeat scroll 0% 0% !important;
  border-bottom: 1px solid #222;
}
.plus {
  float: right;
  margin-right: 5px;
}
.minus {
  float: right;
  margin-right: 5px;
}
ul li a {
  background: #373737;
  height: 30px;
  padding-top: 14px;
  display: block;
  color: #949494;
  text-decoration: none;
  padding-left: 30px;
  border-top: 1px solid #2f2f2f;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
  <a>input form
	<span class='plus'><img src='plus.png'></span>
	<span class='minus' style='display:none'></span>
  </a>
  <ul class='child_ul'>

    
    <li>
      <a href="./food_for_work.php">কাজের বিনিময়ে খাদ্য</a>
    </li>

    <li>
      <a href="./bridge_culvert.php">  সেতু কালভারট</a>
    </li>
    <li>
      <a href="./cyclone_shelter_center.php">ঘূর্ণিঝড় আস্রয় কেন্দ্র</a>
    </li>
   
  </ul>
</li>
<li class='menu_li'>
  <a>Report
	<span class='plus'><img src='plus.png'></span>
	<span class='minus' style='display:none'><img src='minus.png'></span>
  </a>
  <ul class='child_ul'>
    <li class='menu_li1'>
      
      <a>food report
		<span class='plus1'><img src='plus.png'></span>
		<span class='minus1' style='display:none'><img src='minus.png'></span>
	  </a>
      <ul class='child_ul1'>


        <li>
          <a href="./report_food_for_work.php">কাজের বিনিময়ে খাদ্য সাধারণ </a>
        </li>

        <li>
          <a href="./report_food_for_work_summery.php">কাজের বিনিময়ে খাদ্য সমন্নিত </a>
        </li>


      </ul>
    </li>

    <li>
      <a href="./report_backlog.php">  রিপোর্ট আর্কাইভ</a>
    </li>
  </ul>
</li>

Lemon Kazi · Accepted Answer · 2016-01-24 15:06:49Z

1

If event.stopPropogation() doesn't work alone across different browsers try using event.preventDefault() along with event.stopPropogation().

edited Jan 24, 2016 at 15:06

Lemon Kazi

3,3192 gold badges41 silver badges72 bronze badges

answered Jan 24, 2016 at 7:13

Nitin Garg

8866 silver badges7 bronze badges

1 Comment

Lemon Kazi Over a year ago

thanks for answer. can u suggest me where I have to use this?

Collectives™ on Stack Overflow

jQuery submenu not displaying correctly

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related