Можно ли сократить скрипт клика по кнопке
всем прив! разработчики сайта оставили один на один с кодом... приходится как-то разбираться...
Итак, есть блок, раскрывающийся по ссылке "читать далее", при повторном нажатии на неё - блок сворачивался. код JS:
$('.main-card__read').click(function(e) {
$('.main-card__text').addClass('open'
$(this).hide(); //удаляет ссылку из кода после нажатия
e.preventDefault();
});
Я добавил ссылку "свернуть", через CSS - скрытие и показ обеих ссылок, такой код JS получился:
$('.main-card__read').on('click', function(e) {
if ($('.main-card__text').hasClass('open')) {
$('.main-card__text').removeClass('open');
$('.main-card__read').removeClass('open');
$('.main-card__read_1').removeClass('open');
} else {
$('.main-card__text').addClass('open');
$('.main-card__read').addClass('open');
$('.main-card__read_1').addClass('open');
}
e.preventDefault();
});
$('.main-card__read_1').on('click', function(e) {
if ($('.main-card__text').hasClass('open')) {
$('.main-card__text').removeClass('open');
$('.main-card__read').removeClass('open');
$('.main-card__read_1').removeClass('open');
}
e.preventDefault();
});
В итоге два скрипта - первый скрипт на на нажатие "читать далее", второй скрипт на нажатие кнопки "свернуть"... 1. как это все можно (и можно ли?) закинуть в один скрипт? Т.е. чтобы при нажатии на 1-ю кнопку текст разворачивался, надпись ссылки менялась. 2. можно ли сделать, чтобы для мобильных этот же скрипт работал не по выцеливанию надписи на ссылке, а по нажатию на сам блок? (т.е. в функцию клика вместо ".main-card__read" можно вставить ".main-card" - тогда как раз срабатывание по блоку будет, но как разделить это по размеру экрана - не понимаю...) на всякий случай HTML и CSS Код HTML: <div class="main-card"> <div class="main-card__pict"><img src="img/card-pict/card-pict-5.png" alt=""></div> <div class="main-card__descr"> <div class="main-card__title">Аэротруба "Аэродинамика" на Юго-Западной - это целый мир экстрим развлечений в одном месте</div> <ul class="main-card__list"> <li style="font-weight: 400;">Кроме самого полета вы сможете:</li> <li style="font-weight: 400;">Уничтожить всех немецких асов в "Битве за Берлин"</li> <li style="font-weight: 400;">Покорить на горных лыжах Эверест и Эльбрус</li> <li style="font-weight: 400;">Устроить Экстрим-Праздник для любой компании</li> </ul> </div> <div class="main-card__text"> <p>Летите, как птицы, рулите, как шумахеры, пилотируйте, как покрышкины</p> <p style="font-weight: 700">текст...</p> <p>текст...</p> <p>текст...</p> <p>текст...</p> <p>текст...</p> </div> <a id="click" href="#" class="main-card__read">Читать далее...</a> <a id="click" href="#" class="main-card__read_1">Свернуть</a> </div> код CSS:
.main-card__text {
height: 77px;
font-size: 16px;
font-weight: 300;
color: #1b1b1b;
overflow: hidden;
clear: both;
}
.main-card__text.open {
height: auto;
}
.main-card__read {
display: block;
margin-top: 10px;
margin-bottom: 25px;
font-size: 16px;
font-weight: 800;
color: #239ed7;
}
.main-card__read.open {
display: none;
}
.main-card__read:hover {
color: #239ed7;
text-decoration: underline;
}
.main-card__read_1 {
display: none;
margin-top: 10px;
margin-bottom: 25px;
font-size: 16px;
font-weight: 800;
color: #239ed7;
}
.main-card__read_1.open {
display: block;
}
.main-card__read_1:hover {
color: #239ed7;
text-decoration: underline;
}
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
Цитата:
Портянку что выше можно заменить этой строкой:
$('.main-card__text,.main-card__read,.main-card__read_1').toggleClass('open');
|
они все-таки - разработчики, портянка - это мое изобретение, почитал умные сайты, сделал - как смог:stop: у них-то код коротенький (самый верхний)
как сократить портянку - понял:) в один-то код это все объединить можно? (т.е. чтоб дополнительный '.main-card__read_1' и клик на него не создавать) |
алексей 111, под шапкой этого сайта есть ссылка "Поиск", нажмите на нее и поищите слово "открывашка". Найдете не одно решение своей задачи.
|
Почитал, из двух скриптов сделал один, полотно убрал:
$('.main-card__read').on('click', function(e) {
if ($('.main-card__text').hasClass('open')) {
$('.main-card__text').removeClass('open');
$('.main-card__read').text('читать далее...')
} else {
$('.main-card__text').addClass('open');
$('.main-card__read').text('свернуть...')
}
e.preventDefault();
});
как сюда дописать вариант для мобильных - не нашел...:-? т.е. для маленького размера экрана, к примеру меньше 766px - чтобы на открытие и закрытие срабатывало не по нажатии на ссылку: ('.main-card__read'), а по нажатию на сам блок: ('.main-card') |
Ещё короче:
$('.main-card__read').on('click', function(e) {
$('.main-card__read').text(
$('.main-card__text').toggleClass('open').hasClass('open') ? 'свернуть...' : 'читать далее...'
);
e.preventDefault();
});
|
с сокращением разобрался, круто! спс!
этот скрипт работает при клике на ссылку. если сделать:
$('.main-card').on('click', function(e) {
$('.main-card__read').text(
$('.main-card__text').toggleClass('open').hasClass('open') ? 'свернуть...' : 'читать далее...'
);
e.preventDefault();
});
то срабатывает при клике на блок 'div' можно ли сделать, чтобы по 'div' срабатывало только при @media only screen and (max-width: 767px). Т.е. на большом экране - $('.main-card__read'), а экран меньше 767 - $('.main-card') |
т.е. как-нибудь добавить (вопрос куда:-? ):
if (size < 767) {
$('.main-card').on('click', function(e)
......
}
|
$('.main-card, .main-card__read').on('click', function(e) {
if($(window).width() < 767 === $(this).is('.main-card')) {
$('.main-card__read').text(
$('.main-card__text').toggleClass('open').hasClass('open') ? 'свернуть...' : 'читать далее...'
);
e.preventDefault();
}
});
|
| Часовой пояс GMT +3, время: 20:04. |