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> 都应该被隐藏。单击链接后，它必须淡出，所有<p> 应作为一个对象滑入。

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

我希望我的想法很清楚。

提前致谢。

Answer 1

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

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

如果您想一一打开每个<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 3

这是你想要的吗？

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 4

试试这个：

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

这将隐藏#my_id 之后的所有p 元素，并且文件#my_id 中的about 出现在什么位置无关紧要。

Example fiddle

Answer 5

你可以给你想要隐藏的元素一个类，并使用 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 来附加锚点并隐藏“阅读更多内容”，您可以执行以下操作：-

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>

希望对你有帮助