Question

我为简单的菜单开发了以下代码：

$(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');
    }
    
    });
});

.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:'-';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="main_menu_01"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 1.1 Sub Menu </li>
					
    <li class="main_menu_02"> 1.2 Sub Menu </li>
      <ul class="panel">
		
      <li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
      <li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>	

      </ul>	
			
  </ul>

到目前为止，所有这些都工作正常。您也可以在JSFiddle here中找到代码。

如您所见，我想向+按钮添加-和main_menu符号，具体取决于是否打开菜单。因此，我尝试使用before中的CSS代码。但是，尽管打开了菜单，目前+标记仍然存在。

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

您是否知道我需要在代码中进行哪些更改，以便可以使用jQuery代码和+/-符号提供的完整功能？

Answer 1

您需要在横幅上（即点击发生的位置）设置active类。在这里，您可以根据状态更改样式，例如

$(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');
      }
    });
});

.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:'-';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="menu main_menu_01"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 1.1 Sub Menu </li>
					
    <li class="menu main_menu_02"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>	
      </ul>	
  </ul>

将加号/减号添加到jQuery菜单

1 个答案: