单击以打开子菜单时，如何将插入符号的权利更改为向下的插入符号？答案

【问题标题】：How can I change a caret right to a caret down when clicking on it to open sub-menu?单击以打开子菜单时，如何将插入符号的权利更改为向下的插入符号？
【发布时间】：2017-09-06 14:26:43
【问题描述】：

我创建了一个带有子菜单的导航栏。我附近只有一个带有插入符号的成员，当我单击它时，我会与其他成员一起打开子菜单。但是插入符号仍然在右侧。我需要在子菜单打开时将其更改为向下，并在关闭时将其更改为右侧。我必须使用 jQuery 吗？如何？谢谢！

【问题讨论】：

你试过什么？如果您查看创建向下插入符号的代码，那么您将能够创建一个面向右侧的代码......
是的，当触发点击事件以打开子菜单时，在相关元素上添加/删除适用的类。
贴出你目前尝试过的代码
请为您迄今为止的尝试添加演示代码。

标签： jquery html css bootstrap-4

【解决方案1】：

使用 jquery addClass 和 removeClass 您可以删除一个类并添加一个新类，例如：

$('btn').click(function(){
  $('selector').removeClass('caret-right').addClass('caret-down');
});

caret-right 是一个 css 选择器，其中包含用于在正确方向显示插入符号的 css，caret-down 也是如此

【讨论】：

【解决方案2】：

如果你不想使用类，你可以只旋转整个薄：

$('btn').click(function(){
      $("#caret").css({
        transform: 'rotate(' + 90 + 'deg)'
    });
});

是的，我会为此使用 JQuery

【讨论】：

【解决方案3】：

使用 jQuery toggleClass 来实现这个

$('button').click(function(){
$(this).toggleClass('down');
});

.down i{
transform:rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<button>
<i class="fa fa-caret-right"></i>
</button>

【讨论】：