堅持二級導航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

回答

相關問題