Bootstrap导航Javascript无法正常工作

我的Javascript应该打开我的导航的第二层不起作用，我不知道为什么它不工作。我是否监督明显的事情？它在我的办公室里有点温暖。：dBootstrap导航Javascript无法正常工作

$('.submenu').click(function(e) { 
      e.preventDefault(); 
      if ($(this).closest("ul .sub").hasClass("hide")) { 
      $(this).closest("ul .sub").removeClass('hide'); 
      $(this).closest("ul sub").addClass('show'); 
      } 
      else { 
      $(this).closest("ul sub").addClass('hide'); 
      $(this).closest("ul sub").removeClass('show'); 
      } 
    });

的HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse"> 
      <div class="centering"> 
      <ul class="nav navbar-nav"> 
       <li><a class="navbar-brand" href="#"><img id="navlogo" alt="trlololol" src="gfx/Logo_Friedhof_Bildmarke-01.svg"></a></li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="nav-img"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="submenu dropdown-toggle"><a href="#">Next menu level<span class="nav-img"></span></a></li> 
        <ul class="sub hide"> 
         <li><a href="#">Blablabla</a></li> 
         <li><a href="#">Blablubla</a></li> 
         <li><a href="#">Blablibla</a></li> 
        </ul> 
        <li><a href="#">One link</a></li> 
       </ul> 
       </li> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown32<span class="nav-img"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="submenu"><a href="#">Next menu level<span class="nav-img"></span></a></li> 
        <ul class="sub hide"> 
         <li><a href="#">Blablabla</a></li> 
         <li><a href="#">Blablubla</a></li> 
         <li><a href="#">Blablibla</a></li> 
        </ul>

来源

2016-07-22 Pingbeat

尝试使用jsfiddle.net代码。 –

您使用e.preventDefault（）。检查您尝试导航的方法。它是否被触发？ – Vitalii

jQuery'nearest（）'遍历** UP ** DOM树，你确定要这么做吗？我想你需要选择孩子，像这样：$（“ul .sub”，$（this））''而不是'$（this）.closest（“ul sub”）' – pumpkinzzz

你应该巢您ul里面的你li这样的：

   <li class="submenu"><a href="#">Next menu level<span class="nav-img"></span></a> 
       <ul class="sub hide"> 
        <li><a href="#">Blablabla</a></li> 
        <li><a href="#">Blablubla</a></li> 
        <li><a href="#">Blablibla</a></li> 
       </ul> 
       </li>

然后，你可以这样做：

$('.submenu').click(function(e) { 
    $(this).children('ul.sub').toggleClass('hide') 
});

小提琴：https://jsfiddle.net/hubkefw7/

来源

2016-07-22 13:11:11

谢谢，多数民众赞成在工作。 – Pingbeat

Bootstrap导航Javascript无法正常工作

回答

相关问题