2

div内のボタンがクリックされたときに、特定のstory-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');
}

助けていただければ幸いです

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 に答える