jquery - 如何在菜单中激活选择和取消选择

Question

我想在单击一个“li”时将“activeli”类添加到此“li”，但没有用。所有选择的元素和这段代码就像 jquery 中的 toggleclass请帮我。我附上了我的代码(html 和 css)

$(function () {
            $(".list-group-item").click(function () {


                if ($(this).hasclass('activeli')) {
                    $(this).removeclass('activeli')
                }
                else {
                    $(this).addclass('activeli')
                }
            });
        });

.menu {
    height: 500px;
    background-color: rgba(234, 231, 231, 0.81);
}

.menu-search {
    background-color: RGBA(128, 180, 225, 0.69);
    padding: 10px;
}

.menu-header {
    background: linear-gradient(#f6f6f6,#fff,#e7e1e1) !important;
    background-color: #ffffff;
    border-bottom: 1px solid #e7e1e1;
    border-radius: 4px;
    -moz-box-shadow: 0 1px 1px rgba(213, 205, 205, 0.87);
    -webkit-box-shadow: 0 1px 1px rgba(213, 205, 205, 0.87);
    box-shadow: 0 1px 1px rgba(213, 205, 205, 0.87);
    padding: 10px 15px;
}

.menu-title {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}


    .menu-title > a:hover {
        text-decoration: #000 !important;
    }

    .menu-title > span {
        color: #000 !important;
    }

    .menu-title > a {
        text-decoration: none !important;
    }

.position_caret-menu {
    position: absolute;
    left: calc(74% - 177px);
}

.position_caret-submenu {
    position: absolute;
    right: calc(74% - 63px);
    color: #0d95ab;
}
.dashboard {
    height: 46px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #e9e0e0;
    box-shadow: 0px 1px 1px rgba(213, 205, 205, 0.87);
}

    .dashboard > span {
        font-size: 17px;
        color: rgb(34, 110, 183);
        text-align: center;
     
    }

    .dashboard img {
        padding-right: 10px;
        padding-top: 5px;
    }

.show-a span {
    font-size: 17px !important;
    color: #000 !important;
}


.activeli {
    background-color: rgb(153,204,102) !important;
}


a:hover{
    color:#000 !important;
}

a:focus{
    color:#000 !important;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

     <div class="menu-header">
         <span class="menu-title">
             <a data-toggle="collapse" href="#bissuness" class="show-a">
                 <img src="~/img/brainstorm.png" />
                 <span>bissiness</span>


             </a>
             <i class="fa fa-plus-circle position_caret-menu"></i>
         </span>

     </div>
     <div id="bissuness" class="panel-collapse collapse">
         <ul class="list-group">
             <li class="list-group-item">
                 <a href="#">
                     <img src="~/img/rial-.png" style="padding-left: 5px" />
                     <span>buy</span>


                 </a>
             </li>
             <li class="list-group-item">
                 <a href="#">
                     <img src="~/img/iranian-rial1.png" style="padding-left: 5px" />
                     <span>sale</span>
                 </a>
             </li>

         </ul>

     </div>

非常感谢

Answer 1

您使用了错误的关键字“hasClass”，大写字母 C 而不是“hasclass”。我还修改了菜单的 jquery 以使其正常工作。

$(function () {
            $(".list-group-item").click(function () {


                if ($(this).hasClass('activeli')) {
                    $(".list-group-item").removeClass('activeli')
                }
                else {
$(".list-group-item").removeClass('activeli')
                    $(this).addClass('activeli')
                }
            });
        });

.menu {
    height: 500px;
    background-color: rgba(234, 231, 231, 0.81);
}

.menu-search {
    background-color: RGBA(128, 180, 225, 0.69);
    padding: 10px;
}

.menu-header {
    background: linear-gradient(#f6f6f6,#fff,#e7e1e1) !important;
    background-color: #ffffff;
    border-bottom: 1px solid #e7e1e1;
    border-radius: 4px;
    -moz-box-shadow: 0 1px 1px rgba(213, 205, 205, 0.87);
    -webkit-box-shadow: 0 1px 1px rgba(213, 205, 205, 0.87);
    box-shadow: 0 1px 1px rgba(213, 205, 205, 0.87);
    padding: 10px 15px;
}

.menu-title {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}


    .menu-title > a:hover {
        text-decoration: #000 !important;
    }

    .menu-title > span {
        color: #000 !important;
    }

    .menu-title > a {
        text-decoration: none !important;
    }

.position_caret-menu {
    position: absolute;
    left: calc(74% - 177px);
}

.position_caret-submenu {
    position: absolute;
    right: calc(74% - 63px);
    color: #0d95ab;
}
.dashboard {
    height: 46px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #e9e0e0;
    box-shadow: 0px 1px 1px rgba(213, 205, 205, 0.87);
}

    .dashboard > span {
        font-size: 17px;
        color: rgb(34, 110, 183);
        text-align: center;
     
    }

    .dashboard img {
        padding-right: 10px;
        padding-top: 5px;
    }

.show-a span {
    font-size: 17px !important;
    color: #000 !important;
}


.activeli {
    background-color: rgb(153,204,102) !important;
}


a:hover{
    color:#000 !important;
}

a:focus{
    color:#000 !important;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

     <div class="menu-header">
         <span class="menu-title">
             <a data-toggle="collapse" href="#bissuness" class="show-a">
                 <img src="~/img/brainstorm.png" />
                 <span>bissiness</span>


             </a>
             <i class="fa fa-plus-circle position_caret-menu"></i>
         </span>

     </div>
     <div id="bissuness" class="panel-collapse collapse">
         <ul class="list-group">
             <li class="list-group-item">
                 <a href="#">
                     <img src="~/img/rial-.png" style="padding-left: 5px" />
                     <span>buy</span>


                 </a>
             </li>
             <li class="list-group-item">
                 <a href="#">
                     <img src="~/img/iranian-rial1.png" style="padding-left: 5px" />
                     <span>sale</span>
                 </a>
             </li>

         </ul>

     </div>