jquery: создать скрытый элемент + slideToggle

У меня есть div, который содержит ряд p. ситуация выглядит следующим образом: 

<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> после ссылки read more должны быть скрыты. Как только ссылка нажата, она должна исчезнуть, и все <p> должны скользить как один объект.

Поэтому я предполагаю, что следующие <p> должны быть завернуты в скрытый div, который позже будет скользить внутрь.

Я надеюсь, что моя мысль понятна.

Спасибо. продвижение.

5 2
jquery wrapall

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, чтобы добавить якорь и скрыть "read-more-content" , вы можете сделать следующее: -

Демо 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>

Надеюсь, это поможет

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, и не будет иметь значения, где происходит abouts в документе #my_id.

Пример скрипки

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 Demo

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

Если вы хотите открыть каждый <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); } );
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); } );
Спасибо всем за вашу помощь и терпение!
0