單擊文本時如何使用隱藏/顯示切換？

Question

我想單擊文本的第一行，然后將展開該段落的其余部分。 但我也希望能夠通過再次單擊同一行來關閉文本。 我已經為此寫了一些代碼，但是我對JS非常了解。 我希望能在此方面獲得幫助。 謝謝。

這是我的JSFiddle： http : //jsfiddle.net/JUtcX/868/

 $('.expand').each(function() { var reducedHeight = $(this).height(); $(this).css('height', 'auto'); var fullHeight = $(this).height(); $(this).height(reducedHeight); $(this).data('reducedHeight', reducedHeight); $(this).data('fullHeight', fullHeight); }).click(function() { $(this).animate({ height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight') }, 500); }); 

 .expand { height: 14pt; padding: 2px; overflow: hidden } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content" class="expand"> The day after his forty-eighth birthday was the same day Theo Bitner's seventy-five-year-old mother Friended him on Facebook. It was also the same day his wife told him he needed to see a doctor. Or a therapist. “It's your mood,” she said. “It sucks.” </div> 

Answer 1

這樣檢查：

$('.expand').click(function(){
    if($(this).hasClass( "open" )){
    $(this).removeClass("open");
  }else{
    $(this).addClass("open");
  }
});

我只是檢查該段落是否打開，然后在內容中添加或刪除類.open 。

CSS：

.expand {
    max-height: 14pt;
    padding: 2px;
    overflow: hidden;  
    transition: max-height 0.5s;
}

.expand.open{
   max-height: 15em;
}

這里的小提琴

希望對您有幫助。

Answer 2

您可以嘗試toggle（） http://jsfiddle.net/JUtcX/870/

jQuery的

$('.firstLine').click(function (){
$('.secondLine').toggle();
});

的HTML

<div class="firstLine">
The day after his forty-eighth birthday was the same day Theo Bitner’s 
seventy-five-year-old mother Friended him on Facebook.

<div class="secondLine">
It was also the same day his wife told him he needed to see a doctor. Or a 
therapist. “It’s your mood,” she said. “It sucks.” </div>
</div>

的CSS

.secondLine {display: none;}