第二次单击时删除活动类

时间:2016-08-17 23:54:17

标签: javascript jquery css

现在我有一个菜单/子菜单,我在点击时添加活动类。如果我单击两次相同的菜单项,我想删除活动类。我最初的想法只是在jQuery中切换活动类,但这似乎不起作用。有什么想法吗??谢谢。



$(document).ready(function() {
    $("#menusomething li a").on("click", function() {
        $("#menusomething li a").removeClass("active");
        $(this).toggleClass("active");
    });
});

#menusomething li a{color :green}
#menusomething li a.active{color :red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menusomething" style="padding-left:30px">
                          <li><a href="#">HOME</a></li>
                          <li><a href="#">ABOUT</a></li>
                          <li><a class="target" href="#">CHAPTERS</a>
							<ul class="submenu">
                            	<li><a href="#">Dallas</a></li>
                                <li><a href="#">Los Angeles</a></li>
                                <li><a href="#">New York</a></li>
                                <li><a href="#">Northern California</a></li>
                                <li><a href="#">Orange County</a></li>
                                <li><a href="#">Phoenix</a></li>
                                <li><a href="#">San Diego</a></li>
                                <li><a href="#">Washington DC</a></li>
                            </ul></li>
                          <li><a href="#">MEMBER SERVICES</a>
                          	<ul class="submenu">
                            	<li><a href="#">Service</a></li>
                                <li><a href="#">Service2</a></li>
                                <li><a href="#">Service3</a></li>
                                <li><a href="#">Service4</a></li>
                            </ul></li>
                          <li><a href="#">MENU ITEM</a></li>
                          <li><a href="#">MENU ITEM 2</a></li>
                          <li><a href="#">CONTACT</a></li>
                          </ul>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

只需删除此行:

        $("#menusomething li a").removeClass("active");

与切换一起,它将使类再次添加,因此您永远不能实际删除它。

这将有效:

$(document).ready(function() {
    $("#menusomething li a").on("click", function() {
        $(this).toggleClass("active");
    });
});

$(document).ready(function() {
    $("#menusomething li a").on("click", function() {
        $(this).toggleClass("active");
    });
});
#menusomething li a{color :green}
#menusomething li a.active{color :red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menusomething" style="padding-left:30px">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a class="target" href="#">CHAPTERS</a>
	<ul class="submenu">
    	<li><a href="#">Dallas</a></li>
        <li><a href="#">Los Angeles</a></li>
        <li><a href="#">New York</a></li>
        <li><a href="#">Northern California</a></li>
        <li><a href="#">Orange County</a></li>
        <li><a href="#">Phoenix</a></li>
        <li><a href="#">San Diego</a></li>
        <li><a href="#">Washington DC</a></li>
    </ul></li>
  <li><a href="#">MEMBER SERVICES</a>
  	<ul class="submenu">
    	<li><a href="#">Service</a></li>
        <li><a href="#">Service2</a></li>
        <li><a href="#">Service3</a></li>
        <li><a href="#">Service4</a></li>
    </ul></li>
  <li><a href="#">MENU ITEM</a></li>
  <li><a href="#">MENU ITEM 2</a></li>
  <li><a href="#">CONTACT</a></li>
  </ul>