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子菜單不能正確顯示

回答

相關問題