坚持二级导航onclick

我有这2级导航。如果我点击第二级别，它不应该隐藏，但坚持在那里。在悬停时，第二级显示正确，现在我想要的是，我点击sub 2并移动光标，sub 2应该被选中并停留在那里。坚持二级导航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

单击向子元素添加一个类并将鼠标悬停在外如果类存在，则不要上移 –

试试这个：

$(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

这很好。但是如果我点击sub2并移出光标，第二级导航不应该隐藏。它应该只隐藏，如果我点击导航级别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>

我已在您的代码中添加单击事件。正在运行它的最小代码

来源

2016-01-08 06:53:51 Bijal

第二层不应该隐藏，当我点击它。它应该只隐藏，如果我点击第一级。问题是当我移出光标第二级消失 – anu

坚持二级导航onclick

回答

相关问题