JQuery show hide content и Изменение ссылок

100
8

На некоторых страницах моей компании я хочу использовать show and hide toggle details при щелчке по ссылкам.


Я использовал .toggle(), но....


Но вот небольшая проблема, в то время как пользователь нажимает на Показать больше, содержимое должно скользить вниз, и более важно этот текст "Показать больше" должен быть изменен на " Показать меньше" и это должно быть переключено. Надеюсь, вы поняли, что мне действительно нужно.


Спасибо

спросил(а) 2021-01-19T11:51:19+03:00 6 месяцев, 1 неделя назад
1
Решение
203

Джон МакКоллум в основном имеет ваш ответ, но вы также можете использовать сокращенную Javascript, чтобы сделать ваш код немного более компактным:


$('#toggle').click(function(ev) { 
$('#content').toggle();
this.html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more');
})

EDIT: Для ясности я также добавлю разметку html, которая вам нужна для работы вышеуказанного кода. В этом примере показано, что все начинается с.

<p><a id="toggle" href="#">Show less</a></p>
<div id="content"><!-- your stuff goes here. --></div>

Если вы хотите, чтобы он был спрятан для начала, вы просто меняете текст ссылки на "Show more" и добавляете в таблицу стилей следующее правило стиля:


#content { display: none; }

ответил(а) 2021-01-19T11:51:19+03:00 6 месяцев, 1 неделя назад
100

Создайте функции переключения, чтобы установить текст своей ссылки и анимировать свой контент div

$('a.toggle').toggle( 
function() {
$('#contentDiv').slideDown();
$(this).html('Show less');
},
function() {
$('#contentDiv').slideUp();
$(this).html('Show more');
}
);

ответил(а) 2021-01-19T11:51:19+03:00 6 месяцев, 1 неделя назад
63

Это должно сделать это...


HTML:


    <a href="#" id="expand">
<span class="linktext" >Show More</span>
<span class="linktext" style="display:none">Show Less
</span>
</a>
<div id="details" style="display:none"><h1>This is the details</h1></div>

JavaScript:


$('a#expand').click(function() {
$('div#details').slideToggle();
$('span.linktext').toggle();
});

ответил(а) 2021-01-19T11:51:19+03:00 6 месяцев, 1 неделя назад
46

Вы можете изменить значение ссылки с id 'toggle', выполнив следующие действия:


HTML:


<a href="#" id="toggle">Show More</a>

jQuery (в вашей функции переключения):


$('a#toggle').text('Show less');

ответил(а) 2021-01-19T11:51:19+03:00 6 месяцев, 1 неделя назад
46

Вы можете скрыть и показать элементы с помощью jquery hide() и show(), существует также функция slideDown.


чтобы вы стреляли что-то вроде этого onclick


$("#showMore").click(function(){
$("#showMore").hide();
$("#showLess").show();
$("#contentDiv").slideDown();
}

который должен это сделать, дайте мне знать, если у вас есть другие вопросы.

ответил(а) 2021-01-19T11:51:19+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема