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>

Answer 2

<强> Updated fiddle

闪烁效果来自ndf = pd.pivot_table(df,columns='PARAM', values='VALUE',index=['ID','FEATURE'],aggfunc='mean').reset_index()，所以如果你不想要它，你可以简单地使用jQuery方法 toggle() ：

fade

或者您可以使用$(document).ready(function () { $(".Button").hover(function(){ $(".FadeItem").toggle(); }); });方法，例如：

show/hide

希望这有帮助。

＆＃13;

$(document).ready(function () {
  $( ".Button" ).hover(
    function() {
      $(".FadeItem").show();
    }, function() {
      $(".FadeItem").hide();
  });
});

＆＃13;

$(document).ready(function () {
  $( ".Button" ).hover(
    function() {
      $(".FadeItem").show();
    }, function() {
      $(".FadeItem").hide();
  });
});

＆＃13;

.button{
  float: left;
}

.FadeItem{
  display: none;
}

＆＃13;

Answer 3

闪烁效果的原因归功于您使用的.hover()事件。每次在指定的元素上移动鼠标时都会触发.hover()事件，这意味着每次将鼠标移到菜单上（它都会切换，然后输出，然后输入，然后输出等）。< / p>

您可以将.hover()函数拆分为.mouseenter()和.mouseleave()这两个单独的函数来解决此问题：

$(document).ready(function () {
    $(".Button").mouseenter(function(){
        $(".FadeItem").fadeIn(500);
    });
  $(".Button").mouseleave(function(){
        $(".FadeItem").fadeOut(500);
    });
});

Here's an updated fiddle，或者，下面是一个片段：

$(document).ready(function() {
  $(".Button").mouseenter(function() {
    $(".FadeItem").fadeIn(500);
  });
  $(".Button").mouseleave(function() {
    $(".FadeItem").fadeOut(500);
  });
});

.Button {
   float: left;
   border: 1px solid red;
 }
 
 .FadeItem {
   display: none;
   border: 1px solid blue;
 }

<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>

最后，根据HTML中的类，我会假设显示效果需要将子菜单和子子菜单分开。

您可以通过更改选择器以包含.children()

来执行此操作

纯粹为了感兴趣，here's a fiddle以及一个片段向您展示如何实现这一目标。

$(document).ready(function() {
  $(".Button").mouseenter(function() {
    $(this).children(".FadeItem").fadeIn(500);
  });
  $(".Button").mouseleave(function() {
    $(this).children(".FadeItem").fadeOut(500);
  });
});

.Button {
   float: left;
   border: 1px solid red;
 }
 
 .FadeItem {
   display: none;
   border: 1px solid blue;
 }

<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>

取消激活fadeToggle的闪烁

3 个答案: