我試圖做這樣的頁面http://www.ovariancancer.org/ 的問題是在與類event_content我需要顯示只有有限的內容，當內容被越過有限的內容我需要隱藏，然後當我點擊類加我需要顯示所有的內容。的jQuery的單擊事件disiplay內容

$(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{ 
 
\t 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"> 
 
\t 
 
\t <div class="maincontainer"> 
 
\t 
 
\t \t <div class="event_image"> 
 
\t \t 
 
\t \t <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"> 
 
\t 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="event_content"> 
 
\t \t \t <p> 
 
\t \t \t </p> 
 
\t \t \t <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. 
 
\t \t \t \t Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. 
 
\t \t \t \t The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage. 
 
\t \t \t </p> 
 
\t \t 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="plus"> 
 
\t \t \t <img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/> 
 
\t \t </div> 
 
\t 
 
\t </div> 
 

 

 
</div>

來源

2015-04-02 ASR

內容已經slideddown所以你在找什麼可能是'slideToggle'。 – 2015-04-02 09:49:18

爲內容我給高度，如果內容的高度更多，我需要顯示有限的內容，當我點擊加上它顯示所有內容div – ASR 2015-04-02 09:55:43

看看我的解決方案:)首先隱藏一個包含你的東西不想顯示，然後切換一個類，以顯示該分區的內容:) – Afshin 2015-04-02 10:03:59

在這種情況下，你可以調整內容的高度，以一個固定的高度和.css或與上點擊jQuery的高度它.animate：自動;不能讓按鈕在一個片段中工作，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{ 
 
\t 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"> 
 
\t 
 
\t <div class="maincontainer"> 
 
\t 
 
\t \t <div class="event_image"> 
 
\t \t 
 
\t \t <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"> 
 
\t 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="event_content"> 
 
\t \t \t <p> 
 
\t \t \t </p> 
 
\t \t \t <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. 
 
\t \t \t \t Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers. 
 
\t \t \t \t The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage. 
 
\t \t \t </p> 
 
\t \t 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="plus"> 
 
\t \t \t <img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/> 
 
\t \t </div> 
 
\t 
 
\t </div> 
 

 

 
</div>

來源

2015-04-02 09:45:39

這是我的小提琴http://jsfiddle.net/6wft33d7/ – ASR 2015-04-02 09:49:00

有一個額外的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

來源

2015-04-02 09:54:01

這是如何使用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/

來源

2015-04-02 09:59:52 Afshin

這將工作，只要你想

#Live Demo#

的Jquery：

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

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

    }); 

});

來源

2015-04-02 10:26:51 Alupotha

的jQuery的單擊事件disiplay內容

回答

#Live Demo#

相關問題