2013-10-25 3 views
0

Я столкнулся с некоторой стеной с одной из моих линий jQuery, чтобы показать и скрыть погружение. Я использую одну ссылку (далее ...), чтобы показать div и внутри div внизу. У меня есть тесная связь.JQuery показать/скрыть 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; 
} 

ответ

6

Существует , в конце slow

$(".toggle_container").hide("slow"); 

Демо: Fiddle

+0

Какой острый глаз. :) –

+0

Спасибо, не поймал это ... Я удалил запятую, но я все равно получаю тот же конечный результат. – NewB

+1

И он возвращается к началу, потому что вы не предотвращаете поведение по умолчанию. –

0

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"); 
}); 


}); 
Смежные вопросы