2

当单击 div 内的按钮时，我想展开某个故事 div。

即：评论的概述仅显示评论的前几句话。单击按钮时，评论将扩展至全高。

<div id="overview">
<div class="story">
    <div class="naam">John Doe</div>
    <div class="plaats">Washington DC, USA</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at accumsan augue. Curabitur ac tortor felis. Quisque fringilla est at neque congue commodo. Proin metus libero, condimentum sed viverra et, pulvinar eget nisi. Donec viverra arcu ut ante adipiscing laoreet. In non tellus leo. Suspendisse ultrices eros quis odio fermentum id commodo ligula tempus. Nunc tincidunt suscipit dolor, nec tempus quam mattis non. Sed dapibus odio nec nisl ultricies vel commodo dolor sagittis.
    </p>
    <a class="readMore" href="javascript:openStory();" title="Read more">Read more &rsaquo;</a>
</div>
<div class="story">
    <div class="naam">John Doe</div>
    <div class="plaats">Washington DC, USA</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at accumsan augue. Curabitur ac tortor felis. Quisque fringilla est at neque congue commodo. Proin metus libero, condimentum sed viverra et, pulvinar eget nisi. Donec viverra arcu ut ante adipiscing laoreet. In non tellus leo. Suspendisse ultrices eros quis odio fermentum id commodo ligula tempus. Nunc tincidunt suscipit dolor, nec tempus quam mattis non. Sed dapibus odio nec nisl ultricies vel commodo dolor sagittis.
    </p>
    <a class="readMore" href="javascript:openStory();" title="Read more">Read more &rsaquo;</a>
</div>
</div>

.story 的固定高度为 120 像素。我想用 openStory() 将它的高度设置为“自动”；功能。

function openStory(){
    this.parent('.story').css('height','auto');
}

帮助表示赞赏

4

2 回答 2

3 
$('.readMore').click(function(event) { // Bind click event to all .readMore elements

  event.preventDefault(); // Prevent the default click action

  $(this) // Refers to the clicked .readMore element
    .parent() // Get parent element. Assuming it´s the .story element?
    .css('height', 'auto'); // set CSS rule. But why not use a CSS class?

});

..并替换href="javascript:openStory();"为href="#".

于 2013-03-13T15:40:08.267 回答
0

最后使用它来打开/关闭div：

$('.review .story a.readMore').click(function(){
animatingElement = $(this).parent('.story');
if(animatingElement.hasClass('open')){
    animatingElement.removeClass('open');
} else {
    animatingElement.addClass('open');
}
});

直到 Stefan 提出了 toggleClass-function

$('.review .story a.readMore').click(function(){
animatingElement = $(this).parent('.story');
animatingElement.toggleClass('open');
});

这就是要走的路。

于 2013-03-13T16:23:08.107 回答