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

Question

所以我现在正试图弄清楚如何使用jQuery提供的.show（）和.hide（）功能来显示和隐藏包含一些文本的div类或p类，我想要能够在div-parent内部单击以显示上下文。没有按钮但是我要说我将鼠标悬停在包含短文本和背景更改的徽标的div类上，我希望能够单击此类并在父类中显示隐藏的内容。

我会尝试用以下图片说明这一点：

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

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

Answer 1

You could solve your concern in pure CSS on hover. Check if this is what you're looking for!

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

or you can use jQuery!

Note: This code is to retain the transition when the div expands with a dynamic height.

Updated

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 2

通过使用像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 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; }