jQuery單擊事件以顯示內容

Question

我正在嘗試在頁面http://www.ovariancancer.org/中進行操作 ，問題出在class event_content中，我只需要顯示有限的內容，當內容越過時，我需要隱藏然后隱藏的有限內容當我點擊類加我需要顯示的所有內容。

 $(document).ready(function(){ $(".plus").click(function(){ alert('hi sudheer'); $(".event_content").slideDown("slow"); }); }); 

 .event_profit{ background: #ecece9; width: 100%; float: left; border-bottom: 2px solid #fff; height:180px; } .plus{ width:5%; margin-top: 5%; margin-left: 5%; } .event_content p{ margin: 10px 0; } .maincontainer{ width:100%; display: -webkit-inline-box; } .event_image{ width: 15%; margin-left: 2%; margin-top:1%; } .event_content{ width: 70%; margin-top: 2%; margin-left: 2%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="event_profit"> <div class="maincontainer"> <div class="event_image"> <img src="http://www.charitywater.org/blog/../../_files/blog/wp-content/uploads/2015/03/blog-charity-water-thank-you-instameets.png" class="img-circle" style="height:150px;width:150px"> </div> <div class="event_content"> <p> </p> <p> Angelina Jolie Pitt recently announced that she has had her ovaries and fallopian tubes removed in order to reduce her risk of ovarian cancer. Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage. </p> </div> <div class="plus"> <img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/> </div> </div> </div> 

Answer 1

在這種情況下，您可以將內容的高度調整為固定的高度，然后單擊時使用jquery將.css或.animate設置為高度：auto; 不能讓按鈕在摘要中工作，jQuery很可能會丟失嗎？

 $(document).ready(function(){ $(".plus").click(function(){ alert('hi sudheer'); $(".event_content").css({ 'height' : 'auto' }); }); }); 

 .event_profit{ background: #ecece9; width: 100%; float: left; border-bottom: 2px solid #fff; height:180px; } .plus{ width:5%; margin-top: 5%; margin-left: 5%; } .event_content p{ margin: 10px 0; } .maincontainer{ width:100%; display: -webkit-inline-box; } .event_image{ width: 15%; margin-left: 2%; margin-top:1%; } .event_content{ width: 70%; margin-top: 2%; margin-left: 2%; height: 47px; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="event_profit"> <div class="maincontainer"> <div class="event_image"> <img src="http://www.charitywater.org/blog/../../_files/blog/wp-content/uploads/2015/03/blog-charity-water-thank-you-instameets.png" class="img-circle" style="height:150px;width:150px"> </div> <div class="event_content"> <p> </p> <p> Angelina Jolie Pitt recently announced that she has had her ovaries and fallopian tubes removed in order to reduce her risk of ovarian cancer. Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage. </p> </div> <div class="plus"> <img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/> </div> </div> </div> 

Answer 2

有一個額外的div以顯示完整的摘要

HTML

<div class="event_profit">

    <div class="maincontainer">

        <div class="event_image">

        <img src="http://www.charitywater.org/blog/../../_files/blog/wp-content/uploads/2015/03/blog-charity-water-thank-you-instameets.png" class="img-circle" style="height:150px;width:150px">

        </div>

        <div class="event_content" >
            <p>
            </p>
            <p>  Angelina Jolie Pitt recently announced that she has had her ovaries and fallopian tubes removed in order to reduce her risk of ovarian cancer. 
                 Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. 
                 The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage.
            </p>

        </div>

        <div class="plus">
            <img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/>
        </div>

    </div>
  <div class="extarCOntent" style="display:none">
                    <p>  Angelina Jolie Pitt recently announced that she has had her ovaries and fallopian tubes removed in order to reduce her risk of ovarian cancer. 
                 Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. 
                 The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage.
            </p>
            </div>


</div>

CSS

.event_profit,.extarCOntent{
  background: #ecece9;
  width: 100%;
  float: left;
  border-bottom: 2px solid #fff;
  height:180px;
  }  

.plus{
  width:5%;
  margin-top: 5%;
  margin-left: 5%;
}
.event_content p{
    margin: 10px 0;
}
.maincontainer{
 width:100%;
 display: -webkit-inline-box;

}
.event_image{
  width: 15%;
  margin-left: 2%;
  margin-top:1%;
}

.event_content{
 width: 70%;
  margin-top: 2%;
  margin-left: 2%;
}

JavaScript的

$(document).ready(function(){
    $(".plus").click(function(){

        $(".extarCOntent").slideDown("slow");
    });
});

DEMO

Answer 3

這是使用jquery的頁面顯示和隱藏div的方式：

jQuery( document ).ready(function() {
    jQuery(".plus").click(function() 
    {

        jQuery( this).parent().toggleClass( "open" );
        jQuery( this).parent().find('.secret').toggle("slow");
        //jQuery(".secret", this).toggle("slow");
   });

});

http://jsfiddle.net/0g35mot8/1/

Answer 4

這將隨你想要

＃現場演示＃

jQuery的：

jQuery( document ).ready(function() {
    jQuery(".plus").click(function() 
    {

        jQuery( this).parent().toggleClass( "open" );
        jQuery( this).parent().find('.secret').toggle("slow");

   });

});