Question

我开发了以下简单的jQuery菜单：

$(document).ready(function () {
    $(".button, .button_menu_01").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');
    }
    
    });
});

.button {
 width: 50px;
 height: 50px;
 float: right;
 background-color: fuchsia;
}

.panel{ 
 width: 100%;
 padding-left: 0%;
 font-weight: bold;
 overflow: hidden;
 display:none;
}

.button_menu_01 {
 padding-left: 1%;
 background: blue;
}

.button_menu_01:hover {
 background: #CCCCCC;
}

.active {
 background: #CCCCCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Menu</div>
  <div class="panel">	
	
    <div class="button_menu_01">1.0 Main Menu</div>
    <div class="panel">
								
      <div>1.1 Sub Menu</div>
					
      <div class="button_menu_01">1.2 Sub Menu</div>
      <div class="panel">
		
        <div> 1.2.1 Sub Menu</div>
        <div> 1.2.2 Sub Menu</div> 	

    </div>	
			
  </div>

</div>

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

现在，我想实现的是，当用户在子菜单中导航时，在我的情况下，指向类.button_menu_01的主菜单保持悬停。一旦用户折叠子菜单，悬停也应删除。因此，我尝试使用.active类，但现在所有子菜单都为#CCCCCC颜色。

要使此功能有效，我必须更改什么代码？

Answer 1

不是将活动类分配给子菜单，而是将活动类分配给主菜单项

尝试这个js

$（document）.ready（function（）{ $（“。button，.button_menu_01”）。on（'click'，function（）{

var $panel = $(this).next('.panel');
if ($panel.is(':visible')) {
  $panel.add($panel.find('.panel')).slideUp(500,function(){
    $(".button").removeClass('active')
  });
} else {
  $panel.slideDown(500,function(){
    $(".button").addClass('active');
  })
}

});
});

查看更新后的fiddle

折叠子菜单时取消悬停菜单

1 个答案: