Форум

Fedul · #1 (**permalink**) 04.05.2015, 17:29

Здравствуйте.
помогите решить делему
есть меню

<ul class="menu-sidebar">
   <li class="level-1">
      <i class="icon-plus"></i>
      <a class="level-1" href="/.../..."></a>
      <ul class="level-2 active">
         <li class="level-2"></li>
         <li class="level-2"></li>
      </ul>
   </li>
   <li class="level-1">
      <i class="icon-plus"></i>
      <a class="level-1" href="/.../..."></a>
      <ul class="level-2 active">
         <li class="level-2"></li>
         <li class="level-2"></li>
      </ul>
   </li><li class="level-1">
      <i class="icon-plus"></i>
      <a class="level-1" href="/.../..."></a>
      <ul class="level-2 active">
         <li class="level-2"></li>
         <li class="level-2"></li>
      </ul>
   </li>
</ul>

необходимо что бы при нажатии именно на icon-plus происходило раскрытие списка, начал было делать так

jQuery(document).ready(function($){
    $(".menu-sidebar ul.level-2:first").addClass("active");
    $(".menu-sidebar ul.level-2:not(:first)").hide();
	
    $(".menu-sidebar .level-1 i").on("click", function() {
        $(this).slideToggle("slow")
        .siblings(".menu-sidebar ul.level-2:visible").slideUp("slow");
     });
});

но ни как не получается обратиться к элементу ul.level-2 именно нужного родителя

рони · #2 (**permalink**) 04.05.2015, 18:09

Fedul,
ваш номер 217 ...

вы тока не паникуйте.

Fedul · #3 (**permalink**) 04.05.2015, 18:14

информативно)))

рони · #4 (**permalink**) 04.05.2015, 18:27

Fedul,
и так открывашка для меню 217 предыдущие варианты смотреть в поиске по форуму
рекомендую это
Выпадающее меню на jquery

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .icon-plus {
     cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      var ul = $(".menu-sidebar ul.level-2");
      ul.hide();
      $(".menu-sidebar").on("click", ".icon-plus", function() {
      var sub = $(this).nextAll("ul")
      sub.slideToggle("slow")
      ul.not(sub).slideUp("slow");
     });
      ul.first().show()
});
  </script>
</head>

<body>  <ul class="menu-sidebar">
   <li class="level-1">
      <i class="icon-plus">+</i>
      <a class="level-1" href="/.../..."></a>
      <ul class="level-2 active">
         <li class="level-2">1</li>
         <li class="level-2">2</li>
      </ul>
   </li>
   <li class="level-1">
      <i class="icon-plus">+</i>
      <a class="level-1" href="/.../..."></a>
      <ul class="level-2 active">
         <li class="level-2">1</li>
         <li class="level-2">2</li>
      </ul>
   </li><li class="level-1">
      <i class="icon-plus">+</i>
      <a class="level-1" href="/.../..."></a>
      <ul class="level-2 active">
         <li class="level-2">1</li>
         <li class="level-2">2</li>
      </ul>
   </li>
</ul>



</body>

</html>

Fedul · #5 (**permalink**) 04.05.2015, 18:49

понял, исправлюсь)

по теме, спасибо! отлично работает.

Форум

Справочник

Discord чат

Курсы javascript