单击嵌套元素 - 嵌套元素上的事件冒泡未按预期工作

Question

我有一个包含嵌套列表项的菜单。当您单击 li 时，内容会通过添加当前 class 并将其从其他位置删除来显示。当您单击嵌套的 li 时，问题就出现了。单击嵌套的 li 时，内容不显示。任何人都可以给我一些急需的指导，因为我刚开始使用 jquery。我试图缩小额外代码的范围，以便于查看。谢谢

<ul class="profile_manager_nav_items_list">

                                    <li class="profile_introduction_tab current_profile_manager_tab" data-tab="profile_introduction" role="tab" rel="profile_introduction_tab"><input id="introduction_profile_input" type="checkbox" name="tabs" checked hidden/>
                                    <label for="introduction_profile_input"><img src="images/icon_profile_introduction.png"><span class="fa fr"></span>Profile Introduction</label></li>                                        

                                    <li class="personal_aspects_tab" data-tab="personal_aspects" role="tab" rel="personal_aspects_tab"><input id="personal_aspects_profile_input" type="checkbox" name="tabs" hidden/>
                                    <label for="personal_aspects_profile_input"><img src="images/icon_personalaspects.png"><span class="fa fr"></span>Personal Aspects</label></li>

                                    <li class="location_profile_tab" data-tab="location_profile" role="tab" rel="location_profile_tab"><input id="location_profile_input" type="checkbox" name="tabs" hidden/>
                                    <label for="location_profile_input"><img src="images/icon_location.png"><span class="fa"></span>Your Location&#40;s&#41;</label></li>

                                    <li class="interview_tab" data-tab="interview" role="tab" rel="interview_tab"><input id="interview_input" type="checkbox" name="tabs" hidden/>
                                    <label for="personal_interview_input"><img src="images/icon_interview.png"><span class="fa fr"></span>Interview</label></li>

                                    <li class="quizzes_profile_tab" data-tab="quizzes_profile" role="tab" rel="quizzes_profile_tab"><input id="quizzes_profile_input" type="checkbox" name="tabs" hidden/>
                                        <label for="quizzes_profile_input"><img src="images/icon_quiz.png"><span class="fa fr angle_right_font fa-angle-right"></span>Quizzes</label>


                                        <ul class="quizzes_group_sub_items">
                                            <li class="quiz1_tab" data-tab="quiz1" role="tab" rel="quiz1_tab"><input id="quiz1_input"  type="checkbox" name="tabs2" hidden/>    
                                            <label for="quiz1_input"><i class="fa"><img src="images/icon_quiz1.png"></i>Quiz1</label></li>

                                            <li class="quiz2_tab" data-tab="quiz2" role="tab" rel="quiz2_tab"><input id="quiz2_input"  type="checkbox" name="tabs2" hidden/>
                                            <label for="quiz2_input"><i class="fa"><img src="images/icon_quiz2.png"></i>Quiz2</label></li>                  
                                        </ul>

                                    </li>



$(document).ready(function() {      
    $('.profile_manager_nav_items_list li').click(function() {
        var tab_id = $(this).attr('data-tab');
        $('.profile_manager_nav_items_list li').removeClass('current_profile_manager_tab');
        $('.profile_manager_tab_content').removeClass('current_profile_manager_tab');
        $(this).addClass('current_profile_manager_tab');
        $("#"+tab_id).addClass('current_profile_manager_tab');          
    }); 

});

Answer 1

假设我正确理解了您的问题，您可以确保只有特定的列表项应用了 class，方法是使用默认 Event 对象的 stopPropagation 方法。示例如下：

$(document).ready(function() {
  $('.profile_manager_nav_items_list li').click(function(evt) {
    evt.stopPropagation(); // stop the event bubbling
    var tab_id = $(this).attr('data-tab');

    $('.profile_manager_nav_items_list li').removeClass('current_profile_manager_tab');
    $('.profile_manager_tab_content').removeClass('current_profile_manager_tab');

    $(this).addClass('current_profile_manager_tab');
    $("#"+tab_id).addClass('current_profile_manager_tab');
  }); 
});

.current_profile_manager_tab {
  background-color: #808080;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="profile_manager_nav_items_list">

    <li class="profile_introduction_tab current_profile_manager_tab" data-tab="profile_introduction" role="tab" rel="profile_introduction_tab"><input id="introduction_profile_input" type="checkbox" name="tabs" checked hidden/>
    <label for="introduction_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr"></span>Profile Introduction</label></li>

    <li class="personal_aspects_tab" data-tab="personal_aspects" role="tab" rel="personal_aspects_tab"><input id="personal_aspects_profile_input" type="checkbox" name="tabs" hidden/>
    <label for="personal_aspects_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr"></span>Personal Aspects</label></li>

    <li class="location_profile_tab" data-tab="location_profile" role="tab" rel="location_profile_tab"><input id="location_profile_input" type="checkbox" name="tabs" hidden/>
    <label for="location_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa"></span>Your Location&#40;s&#41;</label></li>

    <li class="interview_tab" data-tab="interview" role="tab" rel="interview_tab"><input id="interview_input" type="checkbox" name="tabs" hidden/>
    <label for="personal_interview_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr"></span>Interview</label></li>

    <li class="quizzes_profile_tab" data-tab="quizzes_profile" role="tab" rel="quizzes_profile_tab"><input id="quizzes_profile_input" type="checkbox" name="tabs" hidden/>
        <label for="quizzes_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr angle_right_font fa-angle-right"></span>Quizzes</label>


        <ul class="quizzes_group_sub_items">
            <li class="quiz1_tab" data-tab="quiz1" role="tab" rel="quiz1_tab"><input id="quiz1_input"  type="checkbox" name="tabs2" hidden/> 
            <label for="quiz1_input"><i class="fa"><img src="https://via.placeholder.com/50x50.png"></i>Quiz1</label></li>

            <li class="quiz2_tab" data-tab="quiz2" role="tab" rel="quiz2_tab"><input id="quiz2_input"  type="checkbox" name="tabs2" hidden/>
            <label for="quiz2_input"><i class="fa"><img src="https://via.placeholder.com/50x50.png"></i>Quiz2</label></li>                  
        </ul>

    </li>

</ul>

单击嵌套元素 - 嵌套元素上的事件冒泡未按预期工作

Clicking on nested elements - event bubbling on nested elements not working as expected

javascript

jquery

click

onclick

event-bubbling