Как поймать событие клика на элемент внутреннего списка в jquery?

Question

[Сергей Бурдужа]

У меня есть два списка

<ul class="sidebar__list" id="js-sidebar__list">
							<!--sidebar__list-item-->
							<li class="sidebar__list-item active">
								<a class="sidebar__list-link" href="#">Заборы</a>
								<ul class="sidebar__inner-list">
									<li class="sidebar__inner-list-item">
										<a class="sidebar__inner-list-link" href="#">Заборы из профлиста</a>
									</li>
									<li class="sidebar__inner-list-item">
										<a class="sidebar__inner-list-link" href="#">Заборы из дерева</a>
									</li>
								</ul>
							</li>
							<!--sidebar__list-item-->
						</ul>

Внутренний раскрывается внутри внешнего


Когда кликаю на элемент внутреннего списка то в консоли получаю li.sidebar__list-item.active, то есть элемент внешнего списка.

$('#js-sidebar__list .sidebar__list-item').on('click', function(e){
        e.preventDefault();
        
        var sidebarListLink = 'sidebar__list-link';
        var sidebarInnerLink = 'sidebar__inner-list-link';

        //console.log(e.target.className);

        if(e.target.getAttribute('class') === sidebarListLink){
            var innerList = $(this).find('.sidebar__inner-list');

            if(innerList.is(':visible')){
                $(this).removeClass('active');
                innerList.slideUp();
            }else{
                $('#js-sidebar__list .sidebar__inner-list').slideUp();
                $('#js-sidebar__list .sidebar__list-item').removeClass('active');
                $(this).addClass('active');
                innerList.slideDown();
            }
        }else if(e.target.getAttribute('class') === sidebarInnerLink){
            console.log($(this));   
        }

    });

Мне нужно при клике на элемент внутреннего списка задать ему класс active, как к нему дотянуться?
Заранее благодарен.

Answer 1

[Сергей Бурдужа]

Решил следующим образом

$('#js-sidebar__list .sidebar__list-item').on('click', function(e){
        e.preventDefault();
        
        var sidebarListLink = 'sidebar__list-link';
        var sidebarInnerLink = 'sidebar__inner-list-link';

        //console.log(e.target.className);

        if(e.target.getAttribute('class') === sidebarListLink){
            var innerList = $(this).find('.sidebar__inner-list');

            if(innerList.is(':visible')){
                $(this).removeClass('active');
                innerList.slideUp();
            }else{
                $('#js-sidebar__list .sidebar__inner-list').slideUp();
                $('#js-sidebar__list .sidebar__list-item').removeClass('active');
                $(this).addClass('active');
                innerList.slideDown();
            }
        }else if(e.target.getAttribute('class') === sidebarInnerLink){
            if($(e.target).parent('li').hasClass('active')) {
                $(e.target).parent('li').removeClass('active');
            }else{
                $('#js-sidebar__list .sidebar__inner-list-item').removeClass('active');
                $(e.target).parent('li').addClass('active');
            }
        }

    });

Answer 2

[Сергей Василенко]

Мой вариант

<ul class="nav navbar-nav">
	<li>
		<a href="/index.php?route=product/category&amp;path=1852" rel="nofollow">Заборы
			<span class="show-sc-mobile" data-toggle="collapse">
				<i class="fa fa-plus plus"></i>
			</span>
		</a>
		<div class="collapse mob-submenu-list">
			<ul class="list-unstyled">
				<li><a href="/index.php?route=product/category&amp;path=1852_1853">Заборы из профнастила</a></li>
				<li><a href="/index.php?route=product/category&amp;path=1852_1854">Заборы из дерева</a></li>
			</ul>
		</div>
	</li>
	<li>
		<a href="/index.php?route=product/category&amp;path=1852" rel="nofollow">Навесы
			<span class="show-sc-mobile" data-toggle="collapse">
				<i class="fa fa-plus plus"></i>
			</span>
		</a>
		<div class="collapse mob-submenu-list">
			<ul class="list-unstyled">
				<li><a href="/index.php?route=product/category&amp;path=1852_1853">Навесы из профнастила</a></li>
				<li><a href="/index.php?route=product/category&amp;path=1852_1854">Навесы из поликорбоната</a></li>
			</ul>
		</div>
	</li>
</ul>

$("#menu-mobile-ns .show-sc-mobile").on('click', function(e) {
    e.preventDefault();
    var $link = $(this).closest("a");

    if (e.target === $link[0]){
        return false;
    } else {
       $(this).toggleClass("open-sc-mobile");
       $(this).parent().next().toggleClass("in");
    }
});