的onclick toggleClass不工作

Question

当我在类dropdown-toggle类里面是空的<li class="">应改为开放点击..喜欢<li class="open">

这里是我的Fiddle

这里是我的脚本：

$(document).ready(function(){ 
    $(".dropdown-toggle").click(function(){ 
    $("ul li.current").toggleClass("open"); 
    alert('clicked'); 
    }); 
}); 

我尝试作为当过我的toggleClass点击类dropdown-toggle拨动类。

但它不切换。什么是我做的错误，我怎么能解决这个问题。

Answer 1

您需要为目标的点击li元素，这就是点击dropdown-toggle的父母，所以你可以使用this和.closest()找到它像

$(document).ready(function() { 
 
    $(".dropdown-toggle").click(function() { 
 
    $(this).closest('li').toggleClass("open"); 
 
    }); 
 
});

.submenu { 
 
    display: none; 
 
} 
 
.open .submenu { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="nav nav-list"> 
 
    <li class=""> 
 
    <a class="dropdown-toggle"><span class="menu-text"> First </span></a> 
 
    <ul class="submenu"> 
 
     <li class=""><a href="tables.html">Add First</a></li> 
 
     <li class=""><a href="jqgrid.html">Edit First</a></li> 
 
    </ul> 
 
    </li> 
 
    <li class=""> 
 
    <a class="dropdown-toggle"><span class="menu-text"> Second </span></a> 
 
    <ul class="submenu"> 
 
     <li class=""><a href="tables.html">Add Second</a></li> 
 
     <li class=""><a href="jqgrid.html">Edit Second</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

我认为你必须简单这样的解决方案：

$(document).ready(function(){ 
    $(".dropdown-toggle").click(function(){ 
     $(this).parent().toggleClass("open"); 
     alert('clicked'); 
    }); 
}); 

Answer 3

t oggle类已经jQuery的，因此使用切换（）事件......

$(document).ready(function(){  
    $("body").on("click",".dropdown-toggle",function(){ 
     $(this).find("li").toggle(); 
     alert("clicked"); 
    }); 
}); 

<li class=""> 
    <div class="dropdown-toggle"><span class="menu-text"> First </span> 
     <ul class="submenu"> 
      <li class=""><a href="#">Add First</a></li> 
      <li class=""><a href="#">Edit First</a> 
      </li> 
     </ul> 
    </div> 
</li> 

<li class=""> 
    <div class="dropdown-toggle"><span class="menu-text"> Second </span> 
     <ul class="submenu"> 
      <li class=""><a href="#">Add Second</a></li> 
      <li class=""><a href="#">Edit Second</a> 
      </li> 
     </ul>   
    </div> 
</li>   

`