javascript - jQuery 切换(隐藏/显示)子类

Question

我开始使用 jQuery，在以下场景中我陷入了 child 切换状态:

<div id="id1">
  <heade>
    <div class="hideshow1"> Toggle this div </div>
    <div class="hideshow2"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

 <div id="id2">
  <header>
    <div class="hideshow1"> Toggle this div </div>
    <div class="hideshow2"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

我在这里尝试做的是在初始时隐藏所有 class="hideshow1" 和 class="hideshow2" 但不隐藏 h2页面加载。但是，当用户将指针悬停在 id="id1" 的任何部分时，仅显示 class="hideshow1" 和 class="hideshow2"在相应的 div 内并在移除指针时隐藏。

如果任何 jQuery 专家可以分享一些信息。

提前谢谢

Answer 1

您可以检查包装元素是否悬停，如果是，则显示其子元素或隐藏其子元素。

引用号:hover , find ，和show/hide

代码:

$("#id1, #id2").hover(function () {
    $(this).find(".hideshow1, .hideshow2").show();
}, function () {
    $(this).find(".hideshow1, .hideshow2").hide();
})

演示:http://jsfiddle.net/IrvinDominin/53PgZ/