隱藏和顯示不適用於懸停（）？

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>