Question

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

Answer 1

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

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

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

的css

Answer 2

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

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

是的，我会使用JQuery

Answer 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>

如何在点击打开子菜单时将插入符号更改为插入符号？

3 个答案: