Я натолкнулся на стену с одной из моих линий jQuery, чтобы показать и скрыть погружение. Я использую одну ссылку (далее...), чтобы показать div и внутри div внизу. У меня есть тесная связь.
Функция show работает отлично, но функция закрытия при закрытии div медленно не оживляется и вызывает прокрутку полосы прокрутки страницы до конца. Я думаю, что это, вероятно, связано с ошибкой в том, как я закодирован, поскольку я довольно новичок в jQuery. Любая помощь будет оценена по достоинству.
Я использую jQuery версии 1.6.4
Код jQuery:
$(document).ready(function(){
$(".toggle_container").hide();
$("#standard_or_custom").hide();
$("a.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("a.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("a.close").click(function(){
$(".toggle_container").hide("slow,");
});
});
HTML:
<a href="#" class="trigger">Read more...</a>
<div class="toggle_container">
<p>
CONTENT HERE
</p>
<a href="#" class="close">Close</a>
</div>
CSS, который я использую, связанный с этим div:
.toggle_container {
margin:0;
padding:10px 10px;
border: 1px solid #d6d6d6;
background: #f1f1f1;
overflow: hidden;
font-size:.95em;
clear: both;
}
.toggle_container .block {
padding: 20px;
}
.toggle_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.bottom {
margin-bottom:20px;
}
Nevermind, я понял это; только что добавлен:
$("a.close").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
вернемся к вершине моей закрытой функции, и это позаботилось об этом.
Полный код:
$(document).ready(function(){
$(".toggle_container").hide();
$("#standard_or_custom").hide();
$("a.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("a.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("a.close").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("a.close").click(function(){
$(".toggle_container").hide("slow");
});
});