Question

当点击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的固定高度为120px。我想用openStory（）将其高度设置为'auto';功能

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

感谢帮助

Answer 1

$('.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="#"。

Answer 2

最后使用它来打开/关闭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');
});

这是要走的路。

在a-tag中点击jquery函数设置某个div的高度

2 个答案: