Поэтому я попробовал это https://jsfiddle.net/e1b88ktf/ Я хочу применить эффект скольжения вниз при нажатии на основной текст. а также скрытый текст должен возвращаться при повторном нажатии на основной текст.
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
div.hide {
display:none;}
div.show {
}
<a onclick="showText('text1','text2')" href="javascript:void(0);">main-text</a>
<div id="text1" class="hide">
hidden text
</div>
< Сильный > EDIT :
Спасибо за вашу помощь.
Текст появляется с эффектом постепенного увеличения, а div с цветом фона - нет. Как сделать так, чтобы фоновый цвет исчезал вместе с текстом.
см. обновленное Fiddle.
4 ответа
Проверьте это решение -
function showText(text)
{
$(text).animate({opacity: 'toggle'}, 800);
}
div.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onclick="showText('#text1')" href="javascript:void(0);">text</a>
<div id="text1" class="hide">
hidden text
</div>
<p><a onclick="showText('#text2')" href="javascript:void(0);">text2</a>
<div id="text2" class="hide">
hidden text 2
</div>
Вы можете добиться этого с помощью jquery:
$("#text1").slideToggle().toggleClass("show hide");
< Сильный > ИЗМЕНИТЬ и вам не нужно добавлять / удалять классы в div. Ниже будет работать тоже.
$("#text1").slideToggle();
Для эффекта затухания используйте .fadeToggle();
Используйте этот HTML-код :)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
div.hide { display: none; }
div.show { }
</style>
<script>
function showText()
{
$('#text1').slideToggle();
}
</script>
</head>
<body>
<a onclick="showText('text1','text2')" href="javascript:void(0);">text</a>
<div id="text1" class="hide"> hidden text </div>
</body>
</html>
Вы можете сделать это с помощью метода jQuery toggle ().
HTML :
<div class="toggle">text</div>
<div id="text1">
hidden text
</div>
JS :
$(document).ready(function(){
$(".toggle").click(function(){
$("#text1").toggle(1000);
});
});
Здесь работает скрипка .
ОБНОВЛЕНИЕ
Для нескольких переключателей попробуйте следующий код:
HTML
<div class="toggle">
text1
<div class="hide">
hidden text1
</div>
</div>
<div class="toggle">
text2
<div class="hide">
hidden text2
</div>
</div>
JS
$(document).ready(function(){
$(".toggle").click(function(){
$(this).find(".hide").toggle(1000);
});
});
Вот несколько вариантов переключения: Fiddle .
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.