Не срабатывает эффект анимации slideToggle
Здравствуйте, нужна помощь, уже день вожусь, и так и не пойму в чем проблема, побывал поразомну делать но остановился на этом варианте, но почему то не срабатывает анимация, хотя по идеи должна работать.
Перерыл много форумов, но нечего так и не нашел( подскажите пожалуйста. в чём может быть проблема? <style>
.hides {
display: none;
}
</style>
<div class="table-wrap">
<table>
</tr>
<td>Легитимная пропускная способность*</td>
<td>50 Mbps</td>
</tr>
<tr class="hides">
<td>Географическое расположение</td>
<td>Россия, г.Москва</td>
</tr>
<tr class="hides">
<td>Объем передаваемого трафика</td>
<td>не лимитируется</td>
</tr>
<tr class="hides">
<td>Порт подключения</td>
<td>1 Гбит/с</td>
</tr>
<tr class="hides">
<td>Частота резервного копирования</td>
<td>1 раз в сутки</td>
</tr>
<tr class="hides">
<td>Время установки</td>
<td>15 минут</td>
</tr>
<tr>
<td>Полное описание услуги</td>
<td class="more-inf">
<p>Подробности</p>
</td>
</tr>
</table>
</div>
$(".more-inf").click(function() {
$(".more-inf").toggleClass("active");
$(".more-inf p").text($(".hides").is(':visible') ? 'Подробности' : 'Скрыть подробности');
$(".hides").slideToggle(400);
});
|
Argeares,
на 8 строке ошибка $(function() {
$(".more-inf").click(function() {
$(this).toggleClass("active");
$(this).find('p').text($(".hides").is(':visible') ? 'Подробности' : 'Скрыть подробности');
$(".hides").slideToggle(400);
});
});
|
И сам эффект не сработает для строки <tr>
|
исправил, но анимация так и не появилась(
|
понял
|
а не посоветуете как стоить сделать что бы заработало?)
|
Argeares,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.hides span {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
(function($, window, document) {
$(function() {
$(".more-inf").click(function() {
$(this).toggleClass("active");
$(this).children('p').text($(".hides").find('span').is(':visible') ? 'Подробности' : 'Скрыть подробности');
$(".hides").find('span').slideToggle(400);
});
});
})(jQuery, window, document);
</script>
</head>
<body>
<div class="table-wrap">
<table>
<tr>
<td>Легитимная пропускная способность*</td>
<td>50 Mbps</td>
</tr>
<tr class="hides">
<td><span>Географическое расположение</span></td>
<td><span>Россия, г.Москва</span></td>
</tr>
<tr class="hides">
<td><span>Объем передаваемого трафика</span></td>
<td><span>не лимитируется</span></td>
</tr>
<tr class="hides">
<td><span>Порт подключения</span></td>
<td><span>1 Гбит/с</span></td>
</tr>
<tr class="hides">
<td><span>Частота резервного копирования</span></td>
<td><span>1 раз в сутки</span></td>
</tr>
<tr class="hides">
<td><span>Время установки</span></td>
<td><span>15 минут</span></td>
</tr>
<tr>
<td>Полное описание услуги</td>
<td class="more-inf">
<p>Подробности</p>
</td>
</tr>
</table>
</div>
</body>
</html>
|
сделал, спасибо вам
|
:write: танец с бубнами :)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hides {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".more-inf").click(function() {
$(this).toggleClass("active");
$(this).find('p').text($(".hides").is(':visible') ? ($(".hides").css({ display: "block"}),'Подробности') : 'Скрыть подробности');
$(".hides").stop().slideToggle(400);
}).click().click();
});
</script>
</head>
<body>
<div class="table-wrap">
<table>
<tr>
<td>Легитимная пропускная способность*</td>
<td>50 Mbps</td>
</tr>
<tr class="hides">
<td>Географическое расположение</td>
<td>Россия, г.Москва</td>
</tr>
<tr class="hides">
<td>Объем передаваемого трафика</td>
<td>не лимитируется</td>
</tr>
<tr class="hides">
<td>Порт подключения</td>
<td>1 Гбит/с</td>
</tr>
<tr class="hides">
<td>Частота резервного копирования</td>
<td>1 раз в сутки</td>
</tr>
<tr class="hides">
<td>Время установки</td>
<td>15 минут</td>
</tr>
<tr>
<td>Полное описание услуги</td>
<td class="more-inf">
<p>Подробности</p>
</td>
</tr>
</table>
</div>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:11. |