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

Question

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

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

2- 使用“+/-”符号表示崩溃状态。

很明显，onclick 代码没有正常工作。

目前以下代码显示+父节点>

当我点击“+”号时，列表展开，“+”号被空方 block 取代，而不是“-”号。

<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')