如何在打开其他按钮时从按钮中删除活动

时间:2015-03-25 06:36:23

标签: jquery

代码:

<li class="submenuList item-with-ul selected">
      <a href="#">Blalab</a>
      <ul class="sub-nav flexnav-show" style="display: block;">
        <li><a href="#">Highlights</a></li>
        <li><a href="#">Invited</a></li>
        <li><a href="#">Talks</a></li>
      </ul>
    <span class="touch-button active"><i class="fa fa-chevron-down navicon"></i></span>
    </li>

脚本:

$('.touch-button').on('click', function(e) {
      var $touchButton;

      $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');

      $parent = $(this).parent('.item-with-ul');

      $(".flexnav ul").removeClass('flexnav-show').hide();

      $(this).parent().not('.selected').addClass('selected');
      $('.selected').removeClass('selected');

      //couldn't figure how to remove active from touch-button and add active as so to close and open the submenu
      //$(this).removeClass('active');
      // $touchButton.removeClass('active');
});

管理以在单击其他子菜单列表的按钮时删除/添加所选项。但是当按下下一个子菜单列表的下一个按钮时按钮仍处于活动状态。单击下一步按钮时无法删除或添加活动状态。

不确定为什么它不起作用(参见注释行)

3 个答案:

答案 0 :(得分:0)

试试这个

$('.touch-button').on('click', function(e) {
 $(this).removeClass('active');
});

答案 1 :(得分:0)

试试这个,

$('.touch-button').on('click', function(e) {
    $('.touch-button').removeClass('active');// remove active from all touch-button
    $(this).addClass('active'); // current touch button is active only now
)};

我认为你需要的是,

$('.touch-button').on('click', function(e) {
    $('.touch-button').removeClass('active');
    $('.item-with-ul').removeClass('selected');
    $('.flexnav-show').hide();
    $(this).addClass('active') // make current touch button active
           .closest('.flexnav-show').show() // show the closest ul
           .closest('.item-with-ul').addClass('selected'); //add the selected class to list item
});

答案 2 :(得分:0)

使用e.stopImmediatePropagation();

$(document).ready(function(e){
   e.stopImmediatePropagation();
$('.touch-button').removeClass('active');// remove active from all touch-button
$(this).addClass('active'); // current touch button is active only now

});