-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();
  });
4

3 に答える 3

1

これを試して

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

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

フィドルをチェック

于 2012-12-04T16:51:31.100 に答える
0

これはどうですか（現在のマークアップはそのままにします）-

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

http://jsfiddle.net/CXkqn/を参照してください

追加の段落に「more」クラスを追加することに基づく-

$('.sub-content-btn').click(function() {
    $(this).parent('.col').find('.more').toggle();
})
于 2012-12-04T17:06:15.110 に答える
0

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-04T16:56:46.780 に答える