Удалить класс переключения, когда выбран другой элемент

Question

На моем мобильном сайте у меня есть вертикальное выпадающее меню (например, аккордеон), где каждый родительский элемент имеет стрелку вниз, указывающую раскрывающийся список. Когда пользователь нажимает на родительский элемент, стрелка вращается, и когда вы нажимаете его снова, чтобы закрыть раскрывающийся список, он возвращается обратно в исходное состояние. Однако, если вы не нажмете раскрывающийся список, чтобы закрыть его, а просто нажмите на другой родительский элемент, раскрывающийся список закрывается, но стрелка остается в повернутом положении. Вот код:

$('li.nav-about').click(function() { 
     $('#arrow-about').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

$(' li.nav-industry').click(function() { 
     $('#arrow-indusrty').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

$('li.nav-application').click(function() { 
     $('#arrow-application').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

Любые предложения, как удалить «» поворота класс, когда другой элемент щелкнул?

EDIT Вот что наценка выглядит следующим образом:

<ul id="nav-list"> 

    <li class="nav-list_item nav-about"><a href="#">About Us</a><div class="arrow-down" id="arrow-about"></div> 
    <ul> 
    <li>....</li> 
    <li>...</li> 
    <li>...</li> 
    </ul> 
</li> 


<li class="nav-list_item nav-products"><a href="#">Products</a><div class="arrow-down" id="arrow-products"></div> 

    <ul> 
    <li>....</li> 
    <li>...</li> 
    <li>...</li> 
    </ul> 
</li> 

Answer 1

Вы можете удалить существующий rotate класс от каждой кнопки, прежде чем переключить текущий как:

$('li.nav-about').click(function() { 
     $('.rotate:not("#arrow-about")').removeClass("rotate"); 
     $('#arrow-about').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
}); 

(' li.nav-industry').click(function() { 
     $('.rotate:not("#arrow-indusrty")').removeClass("rotate"); 
     $('#arrow-indusrty').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

$('li.nav-application').click(function() { 
     $('.rotate:not("#arrow-application")').removeClass("rotate"); 
     $('#arrow-application').toggleClass("rotate"); 
     $(this).find('ul').toggle(); 
    }); 

Answer 2

Если вы не хотите менять слишком много кода, просто попробуйте это.

$('li.nav-about').click(function() { 
    $('#arrow-about').toggleClass("rotate"); 
    $('#arrow-indusrty').removeClass("rotate"); 
    $('#arrow-application').removeClass("rotate"); 
    $(this).find('ul').toggle(); 
}); 

$(' li.nav-industry').click(function() { 
    $('#arrow-about').removeClass("rotate"); 
    $('#arrow-indusrty').toggleClass("rotate"); 
    $('#arrow-application').removeClass("rotate"); 
    $(this).find('ul').toggle(); 
}); 

$('li.nav-application').click(function() { 
    $('#arrow-about').removeClass("rotate"); 
    $('#arrow-indusrty').removeClass("rotate"); 
    $('#arrow-application').toggleClass("rotate"); 
    $(this).find('ul').toggle(); 
}); 

Теперь вы уверены, что каждый элемент, а не выбранный, перейдет в исходное состояние.

Answer 3

вы могли бы это сделать.

var toggleNavigation = function(){ 
    var r_navigation = $('li.nav-about,li.nav-industry,li.nav-application'); 

    $(r_navigation).each(function(i, oNav){ 
     $(oNav).on('click',function(){ 
      if(!$(oNav).hasClass('rotate')){ 
       $(r_navigation).removeClass('rotate'); 
       $(oNav).addClass('rotate'); 
      }else{ 
       $(oNav).removeClass('rotate'); 
      } 
     }); 
    }); 
};