jquery - 停用 fadeToggle 的闪烁

Question

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Button">Button
  <div class="FadeItem">
    <ul>                    
      <li>Main Menu A </li>
      <li class="Button">Main Menu B
        <div class="FadeItem">
          <ul>
            <li>Sub Menu B</li>
            <li>Sub Menu B</li>
          </ul>
        </div>  
      </li> 
    </ul>       
  </div>        
</div>  

CSS:

.button{
  float: left;
}

.FadeItem{
  display: none;
}

jQuery:

$(document).ready(function () {
  $(".Button").hover(function(){
    $(".FadeItem").fadeToggle(500);
  });
});

如您所见，上面的简单代码在某些元素的内容中淡入淡出。问题是当我将光标放在 fadein 内容上时它正在闪烁，但我希望内容显示时不闪烁。

您是否知道我需要更改我的代码以停用闪烁？

https://jsfiddle.net/0tfuobpw/1/

Answer 1

更新:

你不需要 js:D

.FadeItem{
  display:none;
  transition: all 0.5s ease;
}
.Button:hover>.FadeItem{
  display:block;
  transition: all 0.5s ease;
}

<div class="Button">Button

	<div class="FadeItem">
	
		<ul>					
			<li>Main Menu A </li>
			<li class="Button">Main Menu B
		
				<div class="FadeItem">
					<ul>
						<li>Sub Menu B</li>
						<li>Sub Menu B</li>
					</ul>
				</div>	
				
			</li>	
			
		</ul>	
		
	</div>	
	
</div>