Javascript下拉菜单Caret旋转

Question

我有一个插入符号指向我的导航项目，一旦点击导航项目，它会显示下拉框，旋转插入符号180并向上指向。唯一的问题是当你点击另一个导航项目时，它隐藏了下拉列表，但插入符号仍然指向上方。这是我用的JavaScript

$('.nav li a').click(function() {
    $(this).children('.caret').toggleClass("rotate-180");
});

单击另一导航项后，是否有方法将插入符号旋转回指向下方？

Answer 1

在没有看到代码的情况下，这可能不是最好的解决方案，但您可以添加一个。函数的作用是：首先将所有插入符号重置为向下位置，然后旋转所需的插入符号。

   $('.nav li a').click(function() {
         $('.nav li a .caret').removeClass("rotate-180");
        $(this).children('.caret').addClass("rotate-180");
    });

Answer 2

$('.nav li a').click(function() {
    if($(this).hasClass('rotate-180')) {
        $('.nav li a .caret').removeClass('rotate-180');
    } else {
        $('.nav li a .caret').removeClass('rotate-180');
        $(this).children('.caret').addClass("rotate-180");
    }
});

Answer 3

没有看到你的超文本标记语言，这是我想出的：

$('.nav li a').click(function() {
    $(this).children('.caret').toggleClass("rotate-180");
    $(this).closest('.nav').find('li a').not(this).children('.caret').removeClass("rotate-180");
});