下拉菜單打開時切換字形

Question

我有一個帶有下拉菜單和子菜單的長導航菜單。 我在移動菜單上使用向下箭頭，以告知某人，然后可以單擊以展開子菜單。 有人點擊后，我想替換

<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>

與

<span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>

任何人都可以共享簡單的JavaScript代碼段以切換圖標嗎？

謝謝！

這是鏈接http://ws2.5giants.com/

Answer 1

您正在使用Twitter Bootstrap。 由於它已經包含jQuery ，因此請使用以下代碼。

由於頁面上有許多向下的箭頭圖示符，因此僅定位.menuli和.dropdown-menu a .menuli的元素

$('.menuli, .dropdown-menu a').click(function () {
  $(this).find('.glyphicon').toggleClass('glyphicon-menu-down'); // Remove on first click, add on second
  $(this).find('.glyphicon').toggleClass('glyphicon-menu-up'); // Add on first click, remove on second
});

Answer 2

我建議將它們全部放在id為“ menu-glyphicon”或類似名稱的div中。 然后你可以寫這段代碼

$(document).ready(function() {
    $('.menu-glyphicon span').click(function (){
        $('.glyphicon').removeClass('.glyphicon-menu-down');
        $('.glyphicon').addClass('.glyphicon-menu-up');
    })
}