jQuery子菜单无法正确显示

时间：2016-01-24 06:56:22

标签： javascript jquery html

这是我的代码，这里第一个菜单正常工作但是当应用子子菜单时，它与之前的li冲突。您可以查看食品报告下的列表。当点击那个孩子没有显示时。

＆＃13;
＆＃13; 
$(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();

    }
  });

});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

谢谢Tushar，你的评论帮助了我。我解决了我的问题，我为我的子子菜单部分放置event.stopPropagation();然后它正常工作。所以，如果它能帮助其他人，我会用片段自己回答。

$(".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>

答案 1 :(得分：1)

如果event.stopPropogation()在不同浏览器中无法单独使用，请尝试使用event.preventDefault()和event.stopPropogation()。

相关问题
最新问题