2

いくつかのpを含むdivがあります。次のような状況：

<div id="container">
    <p>blabla</p>
    <p>blabla</p>
    <p id="my_id">blabla</p>
    <p>blabla</p>
    <p>blabla</p>
    <p>etc...</p>
</div>

ご覧のとおり、たくさんのブラブラ。に追加<a href>read more</a>したい<p#my_id>。<p>続きを読むリンクの後のすべての'は非表示にする必要があります。リンクをクリックすると、フェードアウトする必要があり、すべての<p>'が1つのオブジェクトとしてスライドインする必要があります。

したがって、次<p>のは非表示のdivでラップする必要があり、後でスライドインするはずです。

私の考えが明確であることを願っています。

前もって感謝します。

4

5 に答える 5

0

これは、あなたの望むことですか？

jQuery

$(document).ready(function() {
    $('#my_id>div').hide();
    $('<a href="#" id="read-more-link">Read More</a>').appendTo('#my_id');
    $('#read-more-link').click(function(e) {
        e.preventDefault();
        $(this).fadeOut();
        $('#my_id>div').slideToggle();
    });
});

HTML

<div id="container">
  <div id="my_id">
    <p>blabla</p>
    <div>
      <p>This is some hidden content</p>
      <p>This is some more hidden content</p>
    </div>
  </p>
</div>

jsFiddleデモ

于 2012-04-12T08:07:52.853 に答える
0

これを試して：

var $afterP = $("#my_id").nextAll("p").hide();
var $readMore = $("<a></a>").attr("href", "#").addClass("read-more").text("Read more").appendTo("#my_id");

$("#container").on('click', '.read-more', function() {
    $afterP.slideToggle();
});

これにより、以降のすべてのp要素が非表示#my_idになり、ドキュメントのどこにあるかは関係ありません#my_id。

フィドルの例

于 2012-04-12T07:54:42.283 に答える
0

クラスを非表示にしたい要素を指定し、CSSを使用してデフォルトで非表示にし、リンクがクリックされたら表示することができます。

jsFiddleデモ

CSS

.read-more-content {
  display: none;
}

jQuery

$(document).ready(function() {
    $('#read-more-link').click(function(e) {
        e.preventDefault();
        $(this).fadeOut();
        $('.read-more-content').slideToggle();
    });
});

HTML

<div id="container">
  <p id="my_id">
    blabla <a href="#" id="read-more-link">Read More</a>
  </p>
  <p class="read-more-content">This is some hidden content</p>
  <p class="read-more-content">This is some more hidden content</p>
</div>

アンカーを追加して「read-more-content」を非表示にするためにjQueryのみに依存する場合は、次のようにすることができます。

jsFiddleデモ2

jQuery

$(document).ready(function() {
    $('.read-more-content').hide();
    $('<a href="#" id="read-more-link">Read More</a>').appendTo('#my_id');
    $('#read-more-link').click(function(e) {
        e.preventDefault();
        $(this).fadeOut();
        $('.read-more-content').slideToggle();
    });
});

HTML

<div id="container">
  <p id="my_id">
    blabla
  </p>
  <p class="read-more-content">This is some hidden content</p>
  <p class="read-more-content">This is some more hidden content</p>
</div>

お役に立てれば

于 2012-04-12T07:40:05.237 に答える
0

解決策1：

function do_slidedown(element){
  $(element).slideDown("slow", function(e){
    if($(element).next().length > 0){
      do_slidedown($(element).next());
    }
  });
}

$(document).ready(function() {
    $('#my_id ~ p').hide();
    $('#my_id').append("<a id='read_more' href='#'>read more</a>")
    $('#my_id').find("a#read_more").live("click", function(){
       $(this).hide();  // for remove link
       do_slidedown($('#my_id ~ p').first())
    });
});

それぞれを1つずつ開きたい場合は<p>、次のコードを使用してください...

解決策2：解決策2：

$(document).ready(function() {
    $('#my_id ~ p').hide();
    $('#my_id').append("<a class='read_more' href='#'>read more</a>")
    $("a.read_more").live("click", function(){
       $(this).hide()
       $next_para = $(this).closest("p").next();
       if($next_para.next().length > 0) { $next_para.append("<a class='read_more' href='#'>read more</a>") }
       $next_para.slideDown();
    });
});

ソリューションを再構築します。 自動マージンのためにジャンプすると思い<p>ます。以下で確認してください。

var the_more = $( '<div id="the_more">' ).hide();
        $('DIV#container p').css("margin", "0px").css("padding", "10px 0px");
        $('DIV#container p#inbetween ~ p').wrapAll( the_more );
        $('<a href="#yje_more">read more</a>').appendTo('DIV#container p#inbetween').click( function(e){ e.preventDefault(); $(this).fadeOut(1000, function() { $(this).remove()} ); $('#the_more').slideToggle(1000); } );
于 2012-04-12T07:51:42.157 に答える
0

うわー、最後に、皆さんのおかげで私はそれをクラックしました！追加することにより：

position: relative

親コンテナへのジャンプは完全に消えました！

var the_more = $( '<div id="the_more">' ).hide();
$('DIV#container').css("position", "relative");
$('DIV#container p').css("margin", "0px").css("padding", "10px 0px");
$('DIV#container p#inbetween ~ p').wrapAll( the_more );
$('<a href="#yje_more">read more</a>').appendTo('DIV#container p#inbetween').click( function(e){ e.preventDefault(); $(this).fadeOut(1000, function() { $(this).remove()} ); $('#the_more').slideToggle(1000); } );

皆さんの助けと忍耐に感謝します！

于 2012-04-13T16:11:03.597 に答える