沒有按鈕的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; }