открывать и закрывать разные уровни подменю по клику

Question

У меня есть готовое меню, которое нельзя изменить.Меню составлено из вложенных списков на трех уровнях.Я хочу открыть только ту часть, где родительский элемент нажат.

Вот мой HTML:

  <ul>
  <li>Coffee</li>
  <li>Tea
    <ul class="sub-menu">
      <li>Black tea</li>
      <li>Green tea
        <ul class="sub-menu">
            <li>From India</li>
            <li>From Philippines</li>
        </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul> 

Вначале отображается весь список, поэтому я добавил некоторый код (jquery и CSS) для нацеливания на разные подменю и закрыл их.

$(".sub-menu").not(".sub-menu > li > .sub-menu").addClass("closed first_level");
$(".sub-menu > li > .sub-menu").addClass("closed second_level");

.closed {display: none !important;}
.opened {display: block !important;} 

и теперь открытие и закрытие:

$( ".first_level" ).parent("li").click(function() {
  $(".first_level").toggleClass("closed opened");
  $(".first_level").slideToggle("slow");
});

$( ".second_level" ).parent("li").click(function() {
  $(".second_level").toggleClass("closed opened");
  $(".second_level").slideToggle("slow");  
});

Мое решение работает только наполовину, есть много эффектов, которые я не хочу.Подменю скользят вверх и вниз, перед ними открываются и другие некрасивые вещи.

Я знаю, что мой jQuery - беспорядок, но я все еще учусь.Так может кто-нибудь помочь мне, пожалуйста?

Другой вопрос: эта проблема должна быть довольно распространенной.Какая фраза будет правильной для поиска решений поисковыми системами?Я не мог найти ничего, что помогло мне.

Спасибо!

Answer 1

Я также добавил стрелки, чтобы указать состояние открытия / закрытия.Весь мой код хранится в этой скрипке, здесь только jQuery, если кто-то еще хочет его использовать:

$("body").on('click','.nav_arrow',function(){ 
/* alert($(this).closest('ul').html()); */
if($(this).siblings(".sub-menu").is(":hidden"))
   { $(this).siblings(".sub-menu").slideDown(); 
    $(this).addClass("turn"); return false;
}
else{ $(this).siblings(".sub-menu").slideUp(); 
$(this).removeClass("turn"); return false; } 
});

https://jsfiddle.net/rabox66/duty8pcq/28/

Надеюсь, что все в порядке, в любом случае это работает.;)

Answer 2

Если вы сделаете это так, вы сэкономите много кода: D Для 1-го.Код должен найти, если элемент скрыт или нет, и выбрал функцию, чтобы показать или скрыть.после 1 шага мы прекращаем выполнение функции.Почему вы используете return false?чтобы остановить выполнение кода без этого скрипта, будет скрываться / показываться не только дочерний элемент, с визуально возникающей ошибкой.

Я надеюсь, что помогу xD

В любое время вы можете изменить анимацию xD, я просто помещаю простой слайд xD

$("li").on('click',function(){
if($(this).find("ul:first").is(":hidden")){
$(this).find("ul:first").slideDown();
return false;
}
else{
$(this).find("ul:first").slideUp();
return false;
}
  });

li ul{
display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul class="sub-menu">
      <li>Black tea</li>
      <li>Green tea
        <ul class="sub-menu">
            <li>From India</li>
            <li>From Philippines</li>
        </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Некоторые дополнительные:

Скрипка со стрелкой добавления (: D) xD https://jsfiddle.net/5pxwy0od/

Я использую братьев и сестер, и щелчок мышью по телу, потому что стрелки (элементы) были созданы после того, как html (список узлов) был готов, поэтому элементы не видны для jquery, каждый раз, когда мы добавляем некоторый элемент (узел элемента) после рендеринга DOMмы должны использовать тело как селектор.Вот так:

$("body").on('click','.nav_arrow',function(){ 
// function goes here
});