Question

我有一个包含许多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>

正如你所看到的，很多blabla。我想将<a href>read more</a>追加到<p#my_id>。应该隐藏读取更多链接之后的所有。单击链接后，它必须淡出，并且所有都应作为单个对象滑入。

所以我想以下必须包含在隐藏的div中，稍后会滑入。

我希望我的想法很明确。

提前致谢。

Answer 1

你可以给你想隐藏一个类的元素，并默认使用CSS隐藏它们，然后只需点击链接就显示它们。

jsFiddle Demo

<强> 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>

如果您只想依靠jQuery来附加锚点并隐藏“read-more-content”，您可以执行以下操作： -

jsFiddle Demo 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>

希望这有帮助

Answer 2

解决方案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())
    });
});

如果您想逐个打开每个，请使用以下代码...

解决方案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();
    });
});

重建您的解决方案 我认为由于的自动边距而跳跃，请查看以下内容。

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

Answer 3

试试这个：

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中的位置无关紧要。

Example fiddle

Answer 4

这是你想要的吗？

<强>的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 Demo

Answer 5

哇，最后，多亏你们，我已经破解了！添加：

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

感谢大家的帮助和耐心！

jquery：创建隐藏元素+ slideToggle

5 个答案: