Question

我想使用fontawsome字体更改以下代码中指向下方的箭头。我不确定该怎么办：

1-使父节点右侧的默认箭头消失。

2-使用“ +/-”符号表示折叠状态。

很明显，onclick代码无法正常工作。

当前以下代码显示+ Parent Node >

当我单击“ +”号时，列表会展开，并且“ +”号将替换为空的正方形，而不是“-”号。

<a href="#homeSubmenu" class="dropdown-toggle" data-toggle="collapse" 
   onclick="$('#AAA').toggleClass('fas fa fa-minus')">

<i class="fas fa fa-plus" id="AAA"></i>
   Parent Node
</a>

<ul class="collapse list-unstyled" id="homeSubmenu">
    <li>
        <a href="#">Sub Node 1</a>
    </li>
    <li>
        <a href="#">Sub Node 2</a>
    </li>
</ul>

谢谢。

Answer 1

您可以强制下拉箭头消失：

.dropdown-toggle::after {
   display: none;
}

更新要更改图标，请将onclick更改为具有以下内容：

$('#AAA').toggleClass('fa-minus fa-plus')

Answer 2

调用toggleClass输入加号$('#AAA').toggleClass('fa-minus').toggleClass('fa-plus')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<a href="#homeSubmenu" class="dropdown-toggle" data-toggle="collapse" 
   onclick="$('#AAA').toggleClass('fa-minus').toggleClass('fa-plus')">

<i class="fas fa fa-plus" id="AAA"></i>
   Parent Node
</a>

<ul class="collapse list-unstyled" id="homeSubmenu">
    <li>
        <a href="#">Sub Node 1</a>
    </li>
    <li>
        <a href="#">Sub Node 2</a>
    </li>
</ul>

更改展开/折叠导航中的默认箭头

2 个答案: