我试图做这样的页面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#

相关问题