Javascript下拉菜单插入符号旋转

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

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

---

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

由于没有看到您的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");
});

---

由于没有看到您的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");
});

---

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

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

---

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

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

---

您确定需要切换类吗？Bootstrap很可能已经为您做到了这一点。例如，引导下拉列表将向下拉列表容器div添加一个

open

类。您可以轻松地为这种情况创建子体样式：

---

.dropdown.open.caret{transform:rotate（180度）；}

是否确实需要切换类？Bootstrap很可能已经为您做到了这一点。例如，引导下拉列表将向下拉列表容器div添加一个

open

类。您可以轻松地为这种情况创建子体样式：

---

---

.dropdown.open.caret{transform:rotate（180度）；}

很好。喜欢使用

。而不是（这个）

。可能没什么关系，但是

.children（'.caret'）

会更准确地调用

.toggleClass（）

查看我的选项-这样做吗well@JosephMarikle我只是在重读我的例子，并且在想同样的事情：Dupdated@gavgrif您的答案中有一些格式问题。此外，此答案使用相对导航（使用

.nestest（）

向上搜索树），因此，这其实不一样。撇开isseues不谈——这会运行DOM树来查找祖先——如果先前选择的插入符号在当前选择之前，这很好——但是如果我单击link#3，然后单击link#2会怎么样？第三个元素不是link#2的祖先，也不会被.closest（）…Nice作为目标。喜欢使用

。而不是（这个）

。可能没什么关系，但是

.children（'.caret'）

会更准确地调用

.toggleClass（）

查看我的选项-这样做吗well@JosephMarikle我只是在重读我的例子，并且在想同样的事情：Dupdated@gavgrif您的答案中有一些格式问题。此外，此答案使用相对导航（使用

.nestest（）

向上搜索树），因此，这其实是不一样的。撇开isseues不谈——这会运行DOM树来查找祖先——如果先前选择的插入符号在当前选择之前，这是很好的——但是如果我单击link#3，然后单击link#2会怎么样？第三个元素不是link#2的祖先，并且不会被.closest（）作为目标…如果页面上有另一个

.nav

，则其中的所有选定项目也将被删除

.rotate-180

。我不确定这是不是有意的行为：这可能有问题，对吗？场景：选中的

a

具有

.caret

和一个类

rotate-180

，再次单击它，您将经历以下过程：

$（'.nav li a.caret'）.removeClass（“rotate-180”）

-删除类

$（this）.子类（'.caret'）.toggleClass（“rotate-180”）

-添加类，反之亦然。@Ilija Lončarević-fixed如果页面上有另一个

.nav

，则其中的任何选定项都将被删除

。rotate-180

。我不确定这是不是有意的行为：这可能有问题，对吗？场景：选中的

a

具有

.caret

和一个类

rotate-180

，再次单击它，您将经历以下过程：

$（'.nav li a.caret'）.removeClass（“rotate-180”）

-删除类

$（this）.子类（'.caret'）.toggleClass（“rotate-180”）

-添加类，反之亦然。@Ilija Lončarević-fixed

始终使用removeClass

。你应该在if之前移动它。另外，将

if（$（this…

更改为

if（！$（this…

）并删除else。这意味着如果没有hasclass，则执行此操作

removeClass

始终使用。您应该将其移动到if之前。同时将

if（$（this…

更改为

if（！$（this…

）并删除else。这意味着如果没有hasclass，则执行此操作