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>

Answer 1

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

Answer 2

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>