jQuery子菜单不能正确显示

这里是我的代码这里第一个菜单正常工作，但适用时子子菜单它与以前的李冲突。您可以查看食品报告下面的清单。当点击那个孩子没有显示。jQuery子菜单不能正确显示

$(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 
 
\t <span class='plus'><img src='plus.png'></span> 
 
\t <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 
 
\t <span class='plus'><img src='plus.png'></span> 
 
\t <span class='minus' style='display:none'><img src='minus.png'></span> 
 
    </a> 
 
    <ul class='child_ul'> 
 
    <li class='menu_li1'> 
 
     
 
     <a>food report 
 
\t \t <span class='plus1'><img src='plus.png'></span> 
 
\t \t <span class='minus1' style='display:none'><img src='minus.png'></span> 
 
\t </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>

来源

2016-01-24 Lemon Kazi

当创建现场演示，DON“T包括PHP。使用所生成的HTML。 – Tushar

事件传播的罪魁祸首。使用'event.stopPropagation（）'或检查的目标点击事件，在显示/隐藏元素之前 –

哦，谢谢@Tusher嵌套时间我会检查是错误的 –

谢谢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 
 
\t <span class='plus'><img src='plus.png'></span> 
 
\t <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 
 
\t <span class='plus'><img src='plus.png'></span> 
 
\t <span class='minus' style='display:none'><img src='minus.png'></span> 
 
    </a> 
 
    <ul class='child_ul'> 
 
    <li class='menu_li1'> 
 
     
 
     <a>food report 
 
\t \t <span class='plus1'><img src='plus.png'></span> 
 
\t \t <span class='minus1' style='display:none'><img src='minus.png'></span> 
 
\t </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>

来源

2016-01-24 14:56:50

如果event.stopPropogation()不会在不同的浏览器单独工作，尝试使用event.preventDefault()与event.stopPropogation()一起。

来源

2016-01-24 07:13:31

谢谢你的回答。你可以建议我在哪里使用它？ –

jQuery子菜单不能正确显示

回答

相关问题