Нажатие на вложенные элементы - всплывающее событие на вложенных элементах не работает должным образом - PullRequest
Новая
       18

Нажатие на вложенные элементы - всплывающее событие на вложенных элементах не работает должным образом

0 голосов
/ 04 мая 2019

У меня есть меню с вложенными элементами списка.Когда вы нажимаете на li, содержимое показывается, добавляя текущий класс и удаляя его в другом месте.Проблема вступает в игру, когда вы нажимаете на вложенный 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');          
    }); 

});

1 Ответ

0 голосов
/ 09 мая 2019

Предполагая, что я правильно понял ваш вопрос, вы можете убедиться, что только к конкретному элементу списка применяется класс, используя метод stopPropagation объекта Event по умолчанию. Пример ниже: 

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