Stick навигация второго уровня onclick

У меня есть эта система навигации 2 уровня. Если я нажму на второй уровень, он не должен прятаться, а вот туда. При наведении на второй уровень отображается правильно, теперь я хочу, чтобы я нажал на суб-2 и вытащил курсор, суб-2 должен быть выбран и оставаться там.Stick навигация второго уровня onclick

$(document).ready(function() { 
 
    var $nav = $('#top_navigation > ul > li'); 
 
    $nav.hover(
 
     function() { 
 
    \t  $('ul', this).stop(true, true).slideDown('fast'); 
 
      $('a',this).first().css({"background-color":"#ccc", "color":"#000"}); 
 
    \t }, 
 
    \t function() { 
 
      $('ul', this).slideUp('fast'); 
 
      $('a',this).first().css({"background-color":"#ccc", "color":"#000"}); 
 
    \t } 
 
    ); 
 
});

#top_navigation { 
 
    width: 1248px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    font-family: "Rounded Font", sans-serif; 
 
    font-size: 13px; 
 
} 
 
#top_navigation ul ul { 
 
    display: none; 
 
} 
 
#top_navigation ul { 
 
    padding-left: 0; 
 
} 
 
#top_navigation ul li { 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
    width: 100px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    font-size: 13px; 
 
    list-style: none; 
 
} 
 
#top_navigation ul li a { 
 
    \t display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #000; 
 
    background-color: #FFF; 
 
} 
 
#top_navigation ul li.selected_menu_item a { 
 
    background-color: #ccc; 
 
    color: #FFF; 
 
} 
 
#top_navigation ul li a:hover { 
 
    background-color: #ccc; 
 
    color: #FFF; 
 
} 
 
#top_navigation li li { 
 
    height: 30px; 
 
    line-height: 30px; 
 
    border-top: #ccc 1px solid; 
 
}

<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    </head> 
 
    <body bgcolor="black"> 
 
     <div id="top_navigation"> 
 
    \t \t <ul> 
 
    \t \t \t <li><a href="#">item1</a></li> 
 
    \t \t \t <li><a href="#">item2</a> 
 
    \t \t \t \t <ul class="submenu"> 
 
    \t \t \t \t \t <li><a href="#">sub1</a></li> 
 
    \t \t \t \t \t <li><a href="#">sub2</a></li> 
 
    \t \t \t \t \t <li class="selected_menu_item"><a href="#">sub3</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    </body> 
 
</html>

источник

2016-01-08 anu

по щелчку добавить класс к югу от элемента и при наведении курсора мыши из не slideup, если класс присутствует –

Попробуйте это:

$(document).ready(function() { 
    var $nav = $('#top_navigation > ul > li'); 
    $nav.hover(
     function() { 
      $('ul', this).stop(true, true).slideDown('fast'); 

      $('a',this).first().css({"background-color":"#ccc", "color":"#000"}); 
     }, 
     function() { 
      if(! $('ul', this).children().hasClass('show')) { 
       $('ul', this).slideUp('fast'); 
      } else { 
       $('#top_navigation ul').click(function(){ 
       $('ul.submenu').slideUp(); 
       }) 
      } 
      $('a',this).first().css({"background-color":"#ccc", "color":"#000"}); 
     } 
    ); 

    $('ul.submenu li').click(function(){ 
     $('ul.submenu li').removeClass('selected_menu_item') 
     $(this).addClass('selected_menu_item show') 
    }); 


});

Рабочая скрипку: https://jsfiddle.net/co7u8L23/2/

источник

2016-01-08 06:50:41 Vincent

Это нормально. Но если я нажму на суб2 и выйду из своего курсора, навигация второго уровня не должна скрываться. Он должен скрываться только при нажатии на уровень навигации 1 – anu

Пожалуйста, проверьте обновленную ссылку на скрипку – Vincent

Да, очень близко, теперь, если я нажму первый уровень, то второй уровень должен скрыться. – anu

$(document).ready(function() { 
 
    \t var $nav = $('#top_navigation > ul > li'); 
 
    \t  var $nav1 = $('#top_navigation > ul > li >ul >li'); 
 
    \t $nav.hover(
 
    \t \t function() { 
 
    \t \t \t $('ul', this).stop(true, true).slideDown('fast'); 
 
    
 
       $('a',this).first().css({"background-color":"#ccc", "color":"#000"}); 
 
    \t \t }, 
 
    \t \t function() { 
 
    
 
    \t \t \t $('ul', this).slideUp('fast'); 
 
       $('a',this).first().css({"background-color":"#ccc", "color":"#000"}); 
 
    \t \t } 
 
    \t); 
 
    $nav1.click(function(){ 
 
    $(this).addClass("selected_menu_item"); 
 
    } 
 
    ); 
 
    });

#top_navigation { 
 
    \t width: 1248px; 
 
    \t margin: 0 auto; 
 
    \t position: relative; 
 
    \t text-transform: uppercase; 
 
    \t font-family: "Rounded Font", sans-serif; 
 
    \t font-size: 13px; 
 
    } 
 
    #top_navigation ul ul { 
 
    \t display: none; 
 
    } 
 
    #top_navigation ul { 
 
    \t padding-left: 0; 
 
    } 
 
    #top_navigation ul li { 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    \t float: left; 
 
    \t width: 100px; 
 
    \t height: 30px; 
 
    \t line-height: 30px; 
 
    \t font-size: 13px; 
 
    \t list-style: none; 
 
    } 
 
    #top_navigation ul li a { 
 
    \t display: block; 
 
    \t text-align: center; 
 
    \t text-decoration: none; 
 
    \t color: #000; 
 
    \t background-color: #FFF; 
 
    } 
 
    #top_navigation ul li.selected_menu_item a { 
 
    \t background-color: #ccc; 
 
    \t color: #FFF; 
 
    } 
 
    #top_navigation ul li a:hover { 
 
    \t background-color: #ccc; 
 
    \t color: #FFF; 
 
    } 
 
    #top_navigation li li { 
 
    \t height: 30px; 
 
    \t line-height: 30px; 
 
    \t border-top: #ccc 1px solid; 
 
    }

<html> 
 
     <head> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
      
 
     </head> 
 
     <body bgcolor="black"> 
 
     <div id="top_navigation"> 
 
    \t \t <ul> 
 
    \t \t \t <li><a href="#">item1</a></li> 
 
    \t \t \t <li><a href="#">item2</a> 
 
    \t \t \t \t <ul class="submenu"> 
 
    \t \t \t \t \t <li><a href="#">sub1</a></li> 
 
    \t \t \t \t \t <li><a href="#">sub2</a></li> 
 
    \t \t \t \t \t <li class="selected_menu_item"><a href="#">sub3</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t </li> 
 
    \t \t \t 
 
    \t \t </ul> 
 
    \t </div> 
 
    </body> 
 
    
 
    
 
    </html>

я добавил событие щелчка в ваших code.This это работает snippest его

источник

2016-01-08 06:53:51 Bijal

Второй уровень не должен скрываться, когда я нажимаю на него. Он должен скрываться только в том случае, если я нажимаю на первом уровне. Проблема в том, что когда я выхожу из курсора, второй уровень исчезает – anu

Stick навигация второго уровня onclick

ответ

Смежные вопросы