Javascript 在a-tag中通过jquery函数单击设置特定div的高度

我想在单击某个故事分区内的按钮时展开该分区

i、 e:评论概述只显示评论的前几句话。单击某个按钮时，审阅将扩展到全高

<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>

谢谢你的帮助

$('.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=“#”

，最后使用此选项打开/关闭div:

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

直到Stefan提出了toggleClass函数

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

---

这就是方法。

最好将

href=“javascript:openStory（）；”

替换为

href=“javascript:void（0）；”

而不是

href=“#”

，以避免页面突然滚动谢谢！但是，如果可能的话，我希望在不使用.click（）的情况下执行此操作；事件这样我就可以在整个te网站中使用更多元素的功能。如果这是个愚蠢的想法。。。请告诉我：）改用更具解释性的类名，并在任何需要的地方使用它。毕竟使用了.click（）-方法：）太好了！还可以尝试

toggleClass

功能<代码>animatingElement.toggleClass（'open'）：）

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