Изменить стрелку по умолчанию в nav развернуть / свернуть

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

вызов 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>

Answer 2

Вы можете заставить выпадающую стрелку исчезнуть:

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

ОБНОВЛЕНИЕ Чтобы изменить значок, измените свой onclick на следующее:

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