顯示第一段，然後單擊以顯示其餘段

-1

我需要能夠顯示每列中的第一段，然後單擊查找更多以顯示該列的其他段落。顯示第一段，然後單擊以顯示其餘段

<div class="row"> 
      <div class="col"> 
       <h2>About Us</h2> 
       <img src="images/aboutus.jpg"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
       <div class="sub-content-btn">Find out more</div> 
      </div> 
      <div class="col"> 
       <h2>About Us</h2> 
       <img src="images/aboutus.jpg"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
       <div class="sub-content-btn">Find out more</div> 
      </div> 
      <div class="col"> 
       <h2>About Us</h2> 
       <img src="images/aboutus.jpg"> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p> 
       <div class="sub-content-btn">Find out more</div> 
      </div> 
      </div>

這是jQuery的使用至今：

$('.col').each(function() { 
    $(this).find('p:not(:first)').hide(); 
    }); 

    $('.sub-content-btn').click(function() { 
    $(this).parent('.col').find('p').show(); 
    });

來源

2012-12-04 Rob

http://www.whathaveyoutried.com –

試試這個

$('div.col').each(function() { 
    $(this).find('p:eq(0)').show(); 
}); 

$('.sub-content-btn').on('click', function() { 
    $(this).prev('p').show(); 
});

Check Fiddle

來源

2012-12-04 16:51:31

你會做這樣的事情，使用visibility屬性CSS來隱藏你的附加段落，並使用JS中的show（）和hide（）函數來改變這個屬性。我提供了一個示例回調...你必須把它放在一個事件處理程序中，比如點擊按鈕等等。

<head> 
<style type="text/css"> 
    p.more { 
     visibility: hidden; 
    } 
</style> 

<script type="text/javascript"> 
// on click... 
function some_callback(e) { 
    $('p.more').show(); 
} 
</script> 
</head> 

<body> 
... 
<p class="first">first paragraph is visible</p> 
<p class="more">this paragraph is hidden</p> 
<p class="more">you have to click to see these other paragraphs</p> 
</body>

來源

2012-12-04 16:56:46 ktm5124

這個怎麼樣（讓你的當前標記完好） -

$('.sub-content-btn').click(function() { 
    $(this).parent('.col').find('p:nth-child(4)').toggle(); 
});

請參閱基礎上，加入了「更多」類多餘的段落http://jsfiddle.net/CXkqn/

$('.sub-content-btn').click(function() { 
    $(this).parent('.col').find('.more').toggle(); 
})

來源

2012-12-04 17:06:15

如果每個公司有超過1個額外段落會發生什麼L· – Rob

你沒有這麼說，或者在你原來的帖子中提出這個問題。你是在要求我們解決一些我們看不到或者預料不到的情況嗎？ –

對不起，我已經編輯了這篇文章，你能幫忙嗎？ – Rob

顯示第一段，然後單擊以顯示其餘段

回答

相關問題