关于 html:向 jQuery 菜单添加加号/减号

Add a plus/minus sign to a jQuery menu

我为一个简单的菜单开发了以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function () {
    $(".main_menu_01, .main_menu_02").on('click', function () {
   
    var $panel = $(this).next('.panel');
    if ($panel.is(':visible')) {
      $panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
    } else {
      $panel.slideDown(500).addClass('active');
    }
   
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.panel{
 width: 100%;
 padding-left: 0%;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.main_menu_01 {
 padding-left: 1%;
 background: blue;
}

.main_menu_02 {
 padding-left: 5%;
 background: lime;
}

.sub_menu_01{
 padding-left: 1%;
 background: lime;
}

.sub_menu_02{
 padding-left: 10%;
 background: lime;
}


.main_menu_01:before, .main_menu_02:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before {
 content:'-';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<li class="main_menu_01"> 1.0 Main Menu
</li>

  <ul class="panel">
\t\t\t\t\t\t\t\t
    <li class="sub_menu_01"> 1.1 Sub Menu
</li>

\t\t\t\t\t
    <li class="main_menu_02"> 1.2 Sub Menu
</li>

      <ul class="panel">
\t\t
      <li class="sub_menu_02">  1.2.1 Sub Menu  
</li>

      <li class="sub_menu_02">  1.2.2 Sub Menu  
</li>
\t

     
</ul>
\t
\t\t\t
 
</ul>

到目前为止,所有这些都运行良好。您还可以在此处的 JSFiddle 中找到代码。

如您所见,我想根据菜单是否打开为 main_menu 按钮添加一个 +- 符号。因此,我尝试使用 CSS 中的 before 代码。但是,当前 + 符号仍然存在,尽管菜单已打开。

我不确定这个问题是否是由 jQuery 代码引起的。但是,如果单击按钮 main_menue_01,我需要此 jQuery 代码来关闭/打开整个菜单。

您知道我需要在代码中更改哪些内容,以便我可以使用 jQuery 代码和 +/- 符号提供的完整功能吗?


您需要在横幅上设置 active 类,即点击发生的位置。从那里您可以更改关于状态的样式,例如

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function () {
    $(".main_menu_01, .main_menu_02").on('click', function () {
      var $panel = $(this).next('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $(this).hasClass('main_menu_01') ? $('.menu').removeClass('active') : $(this).removeClass('active');
      } else {
        $panel.slideDown(500);
        $(this).addClass('active');
      }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.panel{
 width: 100%;
 padding-left: 0%;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.main_menu_01 {
 padding-left: 1%;
 background: blue;
}

.main_menu_02 {
 padding-left: 5%;
 background: lime;
}

.sub_menu_01{
 padding-left: 1%;
 background: lime;
}

.sub_menu_02{
 padding-left: 10%;
 background: lime;
}

 .main_menu_01:before, .main_menu_02:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before {
 content:'-';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<li class="menu main_menu_01"> 1.0 Main Menu
</li>

  <ul class="panel">
\t\t\t\t\t\t\t\t
    <li class="sub_menu_01"> 1.1 Sub Menu
</li>

\t\t\t\t\t
    <li class="menu main_menu_02"> 1.2 Sub Menu
</li>

      <ul class="panel">
        <li class="sub_menu_02">  1.2.1 Sub Menu  
</li>

        <li class="sub_menu_02">  1.2.2 Sub Menu  
</li>
\t
     
</ul>
\t
 
</ul>