Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Раскрывающееся меню (https://javascript.ru/forum/jquery/55567-raskryvayushheesya-menyu.html)

Fedul 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 именно нужного родителя

рони 04.05.2015 18:09

Fedul,
ваш номер 217 ... :lol: вы тока не паникуйте.

Fedul 04.05.2015 18:14

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

рони 04.05.2015 18:27

открывашка для меню 217
 
Fedul,
и так открывашка для меню 217 предыдущие варианты смотреть в поиске по форуму
рекомендую это
http://javascript.ru/forum/project/3...na-jquery.html
<!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 04.05.2015 18:49

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

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


Часовой пояс GMT +3, время: 05:52.