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

jQuery toggle (hide/show) children class

本文关键字：显示 子类 隐藏 切换 jQuery      更新时间：2023-09-26

我开始使用jQuery，我被困在以下场景的儿童切换:

<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"的任何部分上时，则仅在各自的div中显示class="hideshow1"和class="hideshow2"，并在移除指针时隐藏。

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

提前感谢

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

Ref: hover, find and show/hide

代码:

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

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

试试这样:

$('#id1, #id2').on('mouseenter mouseleave', function(e) {
    $('.hideshow1, .hideshow2', this).toggle(e.type == 'mouseenter');
});

演示:http://jsfiddle.net/n7Z7a/

你应该只有一个类，即"hideshow"，并让它默认为display: none。然后，在鼠标悬停时，为当前元素显示它。此外，您可以在一个类上绑定元素。像这样:

<div class="trigger">
  <heade>
    <div class="hideshow"> Toggle this div </div>
    <div class="hideshow"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>
 <div class="trigger">
  <header>
    <div class="hideshow"> Toggle this div </div>
    <div class="hideshow"> Toggle this div </div>
    <h2> My Header </h2>
  </header>
  <div class="body1">
     This is my body 
   </div>
 </div>

: 

$('.trigger').on('mouseover', function(e) { $(this).children('hideshow').show(); }).on('mouseout',function(e) { $(this).children('hideshow').hide() });

希望有帮助!

试试这个:

<div id="id1">
  <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>
 <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>

js 

$(".hideshow1").hide();
$(".hideshow2").hide();

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

小提琴

一个非常简单的CSS解决方案(http://jsfiddle.net/8rk88/):

)
.container .hideshow1, .container .hideshow2 {
    display: none;
}
.container:hover .hideshow1, .container:hover .hideshow2 {
    display: block;
}

我强烈建议不要使用jQuery(或JavaScript)，而是使用CSS:

div.hideshow1,
div.hideshow2 {
    visibility: hidden;
}
div:hover div.hideshow1,
div:hover div.hideshow2 {
    visibility: visible;
}

JS Fiddle demo.

当然，你可以使用display而不是visibility，但要注意，这意味着当内容出现/消失时，会有一些不太愉快的"跳跃"。

如果你喜欢稍微优雅一点的渐入渐出方法，你可以实现过渡:

div.hideshow1,
div.hideshow2 {
    opacity: 0;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
div:hover div.hideshow1,
div:hover div.hideshow2 {
    opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

JS提琴演示

相关文章：