Jquery вертикальное многоуровневое меню parent li ловит щелчки мышью по внутренней ul?

Question

Я пытаюсь создать вертикальное многоуровневое меню для небольших экранов.

Я начинаю с добавления класса css, называемого «скрытым» для всех ul элементов в li.Я делаю это с помощью jquery.Этот класс имеет свойства visibility:hidden, opacity:0 и height:0

. Если щелкнуть li с ul внутри, скрытый класс будет удален, а активный'-класс добавлен (к этому ul).Я делаю это с помощью jquery.Этот класс имел свойства visibility:visible, opacity:1 и height:auto.

$(".menu > li > ul").addClass("hidden");
	$(".menu > li > ul > li > ul").addClass("hidden");
	
	$(".menu > li").has("ul").click(function(){
        if ( $(this).children("ul").hasClass( "hidden" ) ) {
            $(this).children("ul").removeClass("hidden");
            $(this).children("ul").addClass("active");
        } else {
            $(this).children("ul").removeClass("active");
            $(this).children("ul").addClass("hidden");
        }
    });

    $(".menu > li > ul > li").has("ul").click(function(){
        if ( $(this).children("ul").hasClass( "hidden" ) ) {
            $(this).children("ul").removeClass("hidden");
            $(this).children("ul").addClass("active");
        } else {
            $(this).children("ul").removeClass("active");
            $(this).children("ul").addClass("hidden");
        }
    });

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">About 1.1</a></li>
            <li><a href="#">About 1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Hello</a>
        <ul>
            <li><a href="#">Hello 1.1</a></li>
            <li>
                <a href="#">Hello 1.2</a>
                <ul>
                    <li><a href="#">Hello 1.2.1</a></li>
                    <li><a href="#">Hello 1.2.2</a></li>
                    <li><a href="#">Hello 1.2.3</a></li>
                </ul>
            </li>
            <li><a href="#">Hello 1.3</a></li>
        </ul>
    </li>
</ul>

Все элементы ul и li имеют положение: статическое в css.Элементы a имеют позицию: block.

ПРОБЛЕМА

Если я нажму на li About, будет отображаться ul в пределах About.Однако, если я нажимаю li О 1.1, вышеупомянутый ul снова скрывается (ему назначается класс css 'hidden').

I думаю li Как-то «ловит» щелчок мышью (потому что это родитель), заставляя jquery удалить «активный» класс и применяя «скрытый» класс.

Как мне это исправить?

Answer 1

Вам необходимо применить событие клика к a, а не ко всему li

Пожалуйста, проверьте код ниже:

$(".menu > li > ul").addClass("hidden");
$(".menu > li > ul > li > ul").addClass("hidden");

$(".menu > li a").click(function(){
	if ( $(this).parent().children("ul").hasClass( "hidden" ) ) {
		$(this).parent().children("ul").removeClass("hidden");
		$(this).parent().children("ul").addClass("active");
	} else {
		$(this).parent().children("ul").removeClass("active");
		$(this).parent().children("ul").addClass("hidden");
	}
});

.hidden{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">About 1.1</a></li>
            <li><a href="#">About 1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Hello</a>
        <ul>
            <li><a href="#">Hello 1.1</a></li>
            <li>
                <a href="#">Hello 1.2</a>
                <ul>
                    <li><a href="#">Hello 1.2.1</a></li>
                    <li><a href="#">Hello 1.2.2</a></li>
                    <li><a href="#">Hello 1.2.3</a></li>
                </ul>
            </li>
            <li><a href="#">Hello 1.3</a></li>
        </ul>
    </li>
</ul>

Подробнее:

Если вы примените событие click к li, оно сделает видимым суб ul liв первый раз, но когда вы нажимаете «Около 1.1», вы сначала нажимаете на его родителя.

Пожалуйста, см. изображение ниже, чтобы понять, что при открытии меню целиком li будет учитывать это событие щелчка