jQuery Element anzeigen und ausblenden ohne eine Schaltfläche

Question

So versuche ich derzeit herauszufinden, wie Sie mit der .show() und .hide() -Funktion von jQuery eine div-Klasse oder eine p-Klasse ein- und ausblenden Ich möchte in der Lage sein, in den Div-Elternteil zu klicken, um den Kontext anzeigen zu können. Keine Schaltfläche, aber sagen wir, ich schwebe über eine Div-Klasse mit einem kurzen Text und einem Logo, das den Hintergrund ändert, und ich möchte in der Lage sein, auf diese Klasse zu klicken und den versteckten Inhalt innerhalb der Elternklasse anzuzeigen.

Ich werde versuchen, dies mitströmen mit den Bildern unten:

So, nachdem ich in der div-Klasse klicken sollen diese die bestehende Klasse erweitern und die versteckten Inhalte zeigen:

Ich hoffe jemand kann mich hier auf den richtigen Weg bringen und mir helfen, das zu lösen. Cheers

Answer 1

Eher einfach mit Event-Handler wie Hover oder Mouseenter zu erreichen.

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

Sie können alle Veranstaltungen finden Sie hier:

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

... und alle Mausereignisse hier:

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

Answer 2

Sie könnten Ihr Anliegen in reinen lösen CSS beim Schweben. Überprüfen Sie, ob Sie das suchen!

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

oder Sie können jQuery verwenden!

Hinweis: Dieser Code ist die transition zu halten, wenn die div mit einer dynamischen Höhe erweitert.

Aktualisiert

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

Wenn das Hauptcontainerelement geklickt wird alle Kinder des angeklickten Elements mit der hidden-text Klasse finden und ihnen zeigen.

$(".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

Bitte eine andere Art und Weise der Annäherung beziehen reine 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; }