隐藏和显示不适用于悬停（）？

Question

我可以看到悬停（）正在工作，但它不隐藏并显示contact_numbers类？我的代码有什么问题？

$(function() { 
 
    $("#hdCallUs").hover(function() { 
 
    $(this).find('.contact_numbers').show(); 
 
    console.log('in') 
 
    }, function() { 
 
    $(this).find('.contact_numbers').remove() 
 
    console.log('out') 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="hdCallUs"> 
 
    <span class="glyphicon glyphicon-earphone"></span> 
 
    <span class="call_txt">Call Us Now</span> 
 

 
    <div class="contact_numbers"> 
 
    <li>999</li> 
 
    <li>888</li> 
 
    </div> 
 
</li>

Answer 1

好像你是在hover out删除元素。

$(this).find('.contact_numbers').remove(); 

是否预计？要隐藏元素更改为：在您的HTML

$(this).find('.contact_numbers').hide(); 

Answer 2

因为错误 Dom结构

<ul>在里面<div class="contact_numbers">缺少如何才能<li>开始没有<ul>

，并在你的问题你写 隐藏和显示不适用于悬停（）？比为什么.remove()在你的代码 如果你想隐藏你的元素使用.hide()看到我的代码，而UL一个div内

$(function() { 
 
    $("#hdCallUs").hover(function() { 
 
    $(this).find('.contact_numbers').show(); 
 
    console.log($(this).find('.contact_numbers')) 
 
    }, function() { 
 
    //$(this).find('.contact_numbers').remove() // this will remove element 
 
    $(this).find('.contact_numbers').hide() // this will hide 
 
    console.log('out') 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<ul> 
 
    <li id="hdCallUs"> 
 
    <span class="glyphicon glyphicon-earphone"></span> 
 
    <span class="call_txt">Call Us Now</span> 
 

 
    <div class="contact_numbers"> 
 
     <ul> 
 
    <li>999</li> 
 
    <li>888</li> 
 
     </ul> 
 
    </div> 
 
</li> 
 
</ul>

Answer 3

我不明白你的HTML的结构（LI ？），但你可以实现这个没有JavaScript，只是这样的CSS：

.contact_numbers{ 
    display: none; 
} 

#hdCallUs:hover .contact_numbers{ 
    display: block; 
} 

Answer 4

你有错误的HTML标记在你的身体是呈现不同与您期望的相比。下面是呈现的HTML：

<ul> 
    <li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span> 
<span class="call_txt">Call Us Now</span> 

     <div class="contact_numbers"></div> 
    </li> 
    <li>999</li> 
    <li>888</li> 
</ul> 

所以很明显的.contact_numbers DIV没有什么hide和show，也许这就是为什么你没有得到预期的效果的原因。更正你的html，然后尝试。

您可以检查控制台中提供的HTML在这个演示 演示：http://jsfiddle.net/GCu2D/929/

确保您使用.hide()和.show()或.toggle()在这个演示： 演示用正确的标记：http://jsfiddle.net/GCu2D/930/

JS：

$(function() { 
    $("#hdCallUs").hover(function() { 
     $(this).find('.contact_numbers').show(); 
     console.log('in', $(this).find('.contact_numbers')) 
    }, function() { 
     $(this).find('.contact_numbers').hide() 
     console.log('out', $(this).find('.contact_numbers')) 
    }); 
}); 

HTML：

<ul> 
    <li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span> 
<span class="call_txt">Call Us Now</span> 

     <div class="contact_numbers"> 
      <ul> 
       <li>999</li> 
       <li>888</li> 
      </ul> 
     </div> 
    </li> 
</ul> 

Answer 5

那是因为你有无效html。你必须在ul内包装你的第二级li。li不能有li作为它的孩子，也display:none;给你contact_numbers +不要remove它徘徊，而不是只有hide它。 remove从DOM永久删除它。

$(function() { 
 
    $("#hdCallUs").hover(function() { 
 
    $(this).find('.contact_numbers').show(); 
 
    console.log('in') 
 
    }, function() { 
 
    $(this).find('.contact_numbers').hide() 
 
    console.log('out') 
 
    }); 
 
});

.contact_numbers{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="hdCallUs"> 
 
    <span class="glyphicon glyphicon-earphone"></span> 
 
    <span class="call_txt">Call Us Now</span> 
 

 
    <div class="contact_numbers"> 
 
    <ul> 
 
     <li>999</li> 
 
     <li>888</li> 
 
    </ul> 
 
    </div> 
 
</li>

Answer 6

你的HTML被打破，你缺少<ul>标签。试试这个代码：

$(function() { 
 
    $("#hdCallUs").hover(function() { 
 
    $('.contact_numbers').show(); <!-- changed this --> 
 
    }, function() { 
 
    $('.contact_numbers').hide() 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="hdCallUs"> 
 
    <span class="glyphicon glyphicon-earphone"></span> 
 
    <span class="call_txt">Call Us Now</span> 
 

 
    <div class="contact_numbers" style="display:none"> 
 
    <ul> <!-- added this --> 
 
    <li>999</li> 
 
    <li>888</li> 
 
    </ul> 
 
    </div> 
 
</li>