Как нажимать на и подменю с помощью javascript

Question

Я довольно новичок в разработке javascript и веб-разработок в целом. В настоящее время я пытаюсь открыть свое подменю в области навигации боковой панели в ответ на событие onclick. Я могу открыть свое подменю индивидуально с некоторым избыточным javascript, потому что я не мог понять, как это сделать с помощью цикла (если это даже самый лучший способ). Но даже когда я добираюсь так далеко, я не могу найти лучший способ закрыть их. Вот мой HTML я использую для моей боковой панели навигации

    <ul id="sidebarNavUl"> 

         <li class="sidebarLi">Main Topic: 
          <ul> 
           <li><a href="#">Sub Topic</a></li> 
          </ul> 
         </li> 

         <li class="sidebarLi">Main Topic: 
          <ul> 
           <li><a href="#">Sub Topic</a></li> 
          </ul> 
         </li> 

         <li class="sidebarLi">Main Topic: 
          <ul> 
           <li><a href="#">Sub Topic</a></li> 
          </ul> 
         </li> 

        </ul> 

       </nav> 

Так же как мой CSS:

.sidebarLi ul { 
    padding-left: 10px; 
    position: absolute; 
    right: 9000em; 

} 

.sidebarLi ul li a { 
    color: #003354; 
} 

.sidebarLi ul li a:hover { 
    color: #003354; 
    padding: 0 10px; 
    width: auto; 
    height: auto; 
    background-color: #edf3f6; 
    border-radius: 5px; 
} 

Обратите внимание, я пытаюсь начать с моим подменю в абсолютном положении и с моим javascript я планирую вставить встроенный стиль, чтобы вернуть их в статическую позицию, потому что каждая тема укладывается поверх друг друга, и я хочу, чтобы они расширялись при нажатии (поскольку в абсолютном положении они не отличаются от обычного потока документов). Я также их перемещал вправо 9000 em вместо того, чтобы прятать их, чтобы они отображались для читателей экрана. Поэтому, если кто-то может помочь мне написать хороший код javascript, чтобы привнести подменю и нажав на него, мы будем очень благодарны. Спасибо.

И в случае, если вам интересно, это было Javascript я пытался написать:

var mainSidebarLi = document.getElementsByClassName("sidebarLi"); 


mainSidebarLi[0].onclick = function() { 

    mainSidebarLi[0].getElementsByTagName("ul")[0].style.position = "static"; 
    mainSidebarLi[0].getElementsByTagName("ul")[0].style.right = "0"; 

}; 

var mainSidebarLi = document.getElementsByClassName("sidebarLi"); 


mainSidebarLi[1].onclick = function() { 

    mainSidebarLi[1].getElementsByTagName("ul")[0].style.position = "static"; 
    mainSidebarLi[1].getElementsByTagName("ul")[0].style.right = "0"; 

}; 

так, что процесс будет повторяться, пока я не получил все элементы в массиве Li.

Answer 1

Другой ответ из другого потока, если вы хотите использовать тег в Li тег:

$('.expandingNav').on('click', function (e) { 
    if ($(e.target).closest('ul').parent('nav.sidebar').length) { 
     if ($(this).hasClass('expanded')) { 
      $(this).children('.hidden').slideUp(); 
      $(this).removeClass('expanded'); 
     } else { 
      $(this).children('.hidden').slideDown(); 
      $(this).addClass('expanded'); 
     } 
    } 
}); 

fiddle

Answer 2

Пара способов сделать это. Один простой способ - использовать jQuery toggleClass. Добавьте активный класс в тег ul и переключите этот класс на событие click.

добавить CSS стиль:

.sidebarLi ul.active { 
position:relative; 
left: 0;  

}

добавить этот JQuery:

$('#sidebarNavUl li').click(function() { 
$(this).children('ul').toggleClass('active'); 
}); 

Если вы новичок в добавлении JQuery - просто добавьте это прямо перед вашим </body> тег:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
$('#sidebarNavUl li').click(function() { 
$(this).children('ul').toggleClass('active'); 
}); 
</script>