jquery - jquery：创建隐藏元素+ slideToggle

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>

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

所以我猜下面<p>的必须被包裹在一个隐藏的 div 中，稍后会滑进去。

我希望我的想法很清楚。

提前致谢。

Answer 1

这是你想要的吗？

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 演示

Answer 2

哇，终于，感谢你们，我破解了它！通过添加：

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

感谢大家的帮助和耐心！

Answer 3

您可以只给想要隐藏类的元素，并使用 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>

如果您只想依靠 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>

希望这可以帮助

Answer 4

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

如果您想<p>一一打开，请使用以下代码...

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

Answer 5

尝试这个：

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

示例小提琴