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, .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');
    })
}

下拉菜单打开时切换字形

2 个答案: