JQuery - чытаць больш, змест HTML паказаць/схаваць

Я хацеў бы рэалізаваць простую чытаць далей функцыю ў JQuery, дзе я магу адрэзаць частка змесціва, а затым паказаць/схаваць рэшту з дапамогай кнопкі.

Калі б гэта быў просты блок тэксту я мог бы проста абгарнуць рэшту ў пралёце, але змест можа быць HTML.

Напрыклад:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in


voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

У гэтым прыкладзе я хацеў бы адрэзаць на маркерной --cut OFF HERE--, які ў сярэдзіне першага р. Але, гэта не можа быць унутры р, ці не можа быць ніякага HTML таксама. Мне проста трэба, каб задаволіць гэта яна павінна быць там

Як гэта можа быць дасягнута?

1
Так, гэта толькі для ілюстрацыі адрэзанай кропкі ў пытанні
дададзена аўтар Marty Wallace, крыніца
Так, гэта толькі для ілюстрацыі адрэзанай кропкі ў пытанні
дададзена аўтар Marty Wallace, крыніца
Вы сапраўды павінны разгледзець магчымасць падзелу на ўтрыманне менш/больш без JS. Гэта будзе выглядаць нашмат больш прыгожымі, калі вы робіце гэта на баку сервера
дададзена аўтар OptimusCrime, крыніца
Вы сапраўды павінны разгледзець магчымасць падзелу на ўтрыманне менш/больш без JS. Гэта будзе выглядаць нашмат больш прыгожымі, калі вы робіце гэта на баку сервера
дададзена аўтар OptimusCrime, крыніца
Вы сапраўды павінны разгледзець магчымасць падзелу на ўтрыманне менш/больш без JS. Гэта будзе выглядаць нашмат больш прыгожымі, калі вы робіце гэта на баку сервера
дададзена аўтар OptimusCrime, крыніца
Гэта магло б быць лепш, я думаю, калі вы нейкім чынам забараніць - адрэзала ТУТ - з'яўляцца ўнутры HTML-элемента.
дададзена аўтар Blazemonger, крыніца
Разгарнуць і Згарнуць HTML змест: github.com/kswedberg/jquery-expander
дададзена аўтар Valery Viktorovsky, крыніца

8 адказы

http://jsfiddle.net/mblase75/65u5R/

Вось некалькі складанае рашэнне. Вынікам з'яўляецца тое, што вы карыстаецеся .html() , каб дадаць першую палову змесціва ў HTML элемент, і дазваляючы jQuery закрыць яго для вас. Тады, калі «чытаць далей» спасылка пстрыкнуў, .html() выкарыстоўваецца зноў, каб запоўніць HTML элемент з усёй радком, за вылікам «--cut OFF HERE--» сегмент.

var allstr = "
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in


voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

", $container = $('#container'), splitstr = "--CUT OFF HERE--", arr_str = allstr.split(splitstr), fstr = (arr_str[0] === allstr) ? allstr : arr_str[0]+"...", readmore = "Read more"; $container.html(fstr); $(readmore).on('click',function(e) { e.preventDefault(); $(this).parent().html(arr_str.join('')); }).appendTo($container);
3
дададзена

http://jsfiddle.net/mblase75/65u5R/

Вось некалькі складанае рашэнне. Вынікам з'яўляецца тое, што вы карыстаецеся .html() , каб дадаць першую палову змесціва ў HTML элемент, і дазваляючы jQuery закрыць яго для вас. Тады, калі «чытаць далей» спасылка пстрыкнуў, .html() выкарыстоўваецца зноў, каб запоўніць HTML элемент з усёй радком, за вылікам «--cut OFF HERE--» сегмент.

var allstr = "
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in


voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

", $container = $('#container'), splitstr = "--CUT OFF HERE--", arr_str = allstr.split(splitstr), fstr = (arr_str[0] === allstr) ? allstr : arr_str[0]+"...", readmore = "Read more"; $container.html(fstr); $(readmore).on('click',function(e) { e.preventDefault(); $(this).parent().html(arr_str.join('')); }).appendTo($container);
3
дададзена

http://jsfiddle.net/mblase75/65u5R/

Вось некалькі складанае рашэнне. Вынікам з'яўляецца тое, што вы карыстаецеся .html() , каб дадаць першую палову змесціва ў HTML элемент, і дазваляючы jQuery закрыць яго для вас. Тады, калі «чытаць далей» спасылка пстрыкнуў, .html() выкарыстоўваецца зноў, каб запоўніць HTML элемент з усёй радком, за вылікам «--cut OFF HERE--» сегмент.

var allstr = "
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in


voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

", $container = $('#container'), splitstr = "--CUT OFF HERE--", arr_str = allstr.split(splitstr), fstr = (arr_str[0] === allstr) ? allstr : arr_str[0]+"...", readmore = "Read more"; $container.html(fstr); $(readmore).on('click',function(e) { e.preventDefault(); $(this).parent().html(arr_str.join('')); }).appendTo($container);
3
дададзена

Першае, што першы, Вы не павінны адлюстроўваць тэкст у HTML без пакавання яго ў любым тэгу HTML. Ёсць розныя шляхі, каб абгарнуць ур тэкст з любога тэга HTML, отд, р, ахоплівае і г.д. Дык вось маё меркаваньне ур тэкст абгортка дзіваў або любы тэг з Classname response_text.

<div class="response_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</div>

.show_me {
  display:none;
}

function makeToggle(ele){
  var html = $("." + ele).html();
  var textarray = html.split("--CUT OFF HERE--");
  var p = $("").text(html).addClass("hide_me");
  var p1 = $("").text(textarray[0]).addClass("show_me");
  var brn = $("<button />").click(function(){
    $(".hide_me").hide();
    $(".show_me").show();
  }).text("hide me").addClass("hide_me");
  var brn1 = $("<button />").click(function(){
    $(".show_me").hide();
    $(".hide_me").show();
  }).text("show more").addClass("show_me");
  $("." + ele).html("").append(p).append(p1).append(brn).append(brn1);
}
makeToggle("response_text");

http://jsfiddle.net/NNMh3/16/

1
дададзена

Першае, што першы, Вы не павінны адлюстроўваць тэкст у HTML без пакавання яго ў любым тэгу HTML. Ёсць розныя шляхі, каб абгарнуць ур тэкст з любога тэга HTML, отд, р, ахоплівае і г.д. Дык вось маё меркаваньне ур тэкст абгортка дзіваў або любы тэг з Classname response_text.

<div class="response_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</div>

.show_me {
  display:none;
}

function makeToggle(ele){
  var html = $("." + ele).html();
  var textarray = html.split("--CUT OFF HERE--");
  var p = $("").text(html).addClass("hide_me");
  var p1 = $("").text(textarray[0]).addClass("show_me");
  var brn = $("<button />").click(function(){
    $(".hide_me").hide();
    $(".show_me").show();
  }).text("hide me").addClass("hide_me");
  var brn1 = $("<button />").click(function(){
    $(".show_me").hide();
    $(".hide_me").show();
  }).text("show more").addClass("show_me");
  $("." + ele).html("").append(p).append(p1).append(brn).append(brn1);
}
makeToggle("response_text");

http://jsfiddle.net/NNMh3/16/

1
дададзена

Першае, што першы, Вы не павінны адлюстроўваць тэкст у HTML без пакавання яго ў любым тэгу HTML. Ёсць розныя шляхі, каб абгарнуць ур тэкст з любога тэга HTML, отд, р, ахоплівае і г.д. Дык вось маё меркаваньне ур тэкст абгортка дзіваў або любы тэг з Classname response_text.

<div class="response_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</div>

.show_me {
  display:none;
}

function makeToggle(ele){
  var html = $("." + ele).html();
  var textarray = html.split("--CUT OFF HERE--");
  var p = $("").text(html).addClass("hide_me");
  var p1 = $("").text(textarray[0]).addClass("show_me");
  var brn = $("<button />").click(function(){
    $(".hide_me").hide();
    $(".show_me").show();
  }).text("hide me").addClass("hide_me");
  var brn1 = $("<button />").click(function(){
    $(".show_me").hide();
    $(".hide_me").show();
  }).text("show more").addClass("show_me");
  $("." + ele).html("").append(p).append(p1).append(brn).append(brn1);
}
makeToggle("response_text");

http://jsfiddle.net/NNMh3/16/

1
дададзена

Не ўпэўнены, што калі гэта сапраўды тое, што вы шукаеце. Паглядзіце на прыведзены ніжэй код:


Click the button to show or hide the content below <input id="button" type="button" value="Read More" />

This content will show and hide on click

(function() { $('#button').click(function() { $('#show_hide').toggle(300); }) })(jQuery);


Там няма нічога асаблівага на самай справе. Першапачаткова я схавала пункт «паказаць/схаваць», які павінен адлюстроўвацца, калі карыстальнік націскае на кнопку. Рядный CSS быў зроблены толькі для мэт дадзенага пытання. У адваротным выпадку, спецыялісты рэкамендуюць вам напісаць свой CSS на знешні файл ... Затым я выкарыстаў <�б> тумблер() функцыі ў <�б> націсніце апрацоўшчык падзей, каб анімацыя бывае .. ,

see the fiddle here: http://jsfiddle.net/wuGbh/

1
дададзена

Не ўпэўнены, што калі гэта сапраўды тое, што вы шукаеце. Паглядзіце на прыведзены ніжэй код:


Click the button to show or hide the content below <input id="button" type="button" value="Read More" />

This content will show and hide on click

(function() { $('#button').click(function() { $('#show_hide').toggle(300); }) })(jQuery);


Там няма нічога асаблівага на самай справе. Першапачаткова я схавала пункт «паказаць/схаваць», які павінен адлюстроўвацца, калі карыстальнік націскае на кнопку. Рядный CSS быў зроблены толькі для мэт дадзенага пытання. У адваротным выпадку, спецыялісты рэкамендуюць вам напісаць свой CSS на знешні файл ... Затым я выкарыстаў <�б> тумблер() функцыі ў <�б> націсніце апрацоўшчык падзей, каб анімацыя бывае .. ,

see the fiddle here: http://jsfiddle.net/wuGbh/

1
дададзена