Question

我有一个指向我的导航项目的插入符号，一旦单击导航项目，它就会显示下拉菜单并旋转插入符号180并将其指向上方。唯一的问题是，当您单击另一个导航项时，它会隐藏下拉列表，但是插入符号始终朝上。这是我正在使用的javascript

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

一旦点击了另一个导航项，有没有办法将插入符号向后旋转指向下方？

Answer 1

没有看到你的HTML，这就是我提出的：

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

Answer 2

没有看到代码，这可能不是最佳解决方案，但您可以在toggleClass之前添加.removeClass（）函数，先将所有插入符号重置为向下位置，然后旋转所需的插入符号。

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

Answer 3

$('.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 4

您确定需要切换课程吗？ Bootstrap很可能已经为你做了。例如，Bootstrap下拉列表将向下拉列表容器div添加open类。您可以轻松地为这种情况创建后代样式：

.dropdown.open .caret { transform: rotate(180deg); }

Javascript下拉菜单插入符号旋转

4 个答案: