没有按钮的jQuery显示和隐藏元素

Question

因此，我目前正试图弄清楚如何使用jQuery提供的.show（）和.hide（）功能来显示和隐藏div类或p类包含一些文本，我希望能够在div-parent内部单击以显示上下文。不要有按钮，但我们假设我将鼠标悬停在包含简短文本和徽标的div类上，背景会发生变化，我希望能够点击此类并在父类中显示隐藏的内容。

我会尝试用下面的图片ilustrate此：

所以以后我在div级点击这应该扩展现有的类，并显示被隐藏的内容：

我希望有人能让我走上正确的轨道，并帮助我解决这个问题。 干杯

Answer 1

通过使用像hover或mouseenter这样的事件处理程序实现起来非常简单。

$("div").hover(function(event){ 
$(this).show(); 
    /*OR*/ 
$(".selector").show(); 
}); 

你可以在这里找到所有事件：

http://api.jquery.com/category/events/

...和这里所有的鼠标事件：

http://api.jquery.com/category/events/mouse-events/

Answer 2

你可以解决您的关注纯悬停上的CSS。检查这是你在找什么！

.content:hover, .content2:hover, .content3:hover { 
    height: 200px; 
} 

或者你可以使用jQuery！

注：此代码是保留transition当div与动态高度膨胀。

更新

jQuery.fn.animateAuto = function(prop, speed, callback){ 
 
    var elem, height; 
 
    return this.each(function(i, el){ 
 
     el = jQuery(el), elem = el.clone().css({"height":"auto"}).appendTo("body"); 
 
     height = elem.css("height"), 
 
     elem.remove(); 
 
     if(prop === "height") 
 
      el.animate({"height":height}, speed, callback); 
 
    }); 
 
} 
 

 
$("document").ready(function(){ 
 
    $(".content, .content2, .content3").hover(function(){ 
 
    var h = $(this).css("height"); 
 
    if(h == '50px'){ 
 
     $(this).animateAuto('height', 20); 
 
    } 
 
    else{ 
 
     $(this).css("height", '50px'); 
 
    } 
 
    }); 
 
});

.content, .content2, .content3 { 
 
    padding: 5px; 
 
    height: 50px; 
 
    width: 25%; 
 
    margin:0 2%; 
 
    float: left; 
 
    position: relative; 
 
    transition: height 0.5s; 
 
    -webkit-transition: height 0.5s; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    background:#666; 
 
    border-radius:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <h2>Div 1</h2> 
 
    <p>This is an example! This is an example!</p> 
 
</div> 
 

 
<div class="content2"> 
 
    <h2>Div 2</h2> 
 
    <p>This is an example! This is an example! This is an example! This is an example! This is an example2!</p> 
 
</div> 
 

 
<div class="content3"> 
 
    <h2>Div 3</h2> 
 
    <p>This is an example! This is an example!</p> 
 
</div>

Answer 3

当主容器元素被点击找到所有与hidden-text类单击元素的儿童，并给他们。

$(".hidden-text").hide(); 
 
$(".container").click(function() { 
 
    $(".container").children(".hidden-text").hide(); 
 
    $(this).children(".hidden-text").show(); 
 
})

.container{ 
 
    width:100px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div> 
 
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div> 
 
<div class="container">This is a div<div class="hidden-text">This is a bunch of hidden text in the div inside of another div.</div></div>

Answer 4

请不要使用参考纯CSS

<div class="box-content"> 
    <h2>Div 1</h2> 
    <p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p> 
</div> 

<div class="box-content"> 
    <h2>Div 2</h2> 
    <p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p> 
</div> 

<div class="box-content"> 
    <h2>Div 3</h2> 
    <p>This is an example! This is an example! This is an example! This is an example! This is an example! This is an example! </p> 
</div> 


.box-content { padding: 5px; height: auto; width: 25%; margin: 0 2%; float: left; background: #666; border-radius: 5px; } 
.box-content p { display: none; } 
.box-content:hover p { display: block; color: #fff; }