0

我用我的 jQuery 行来显示和隐藏潜水时遇到了一些障碍。我正在使用一个链接（阅读更多...）来显示 div，并且在 div 的底部我有一个关闭链接。

show 功能完美运行，但关闭 div 时的 close 功能不会缓慢动画并导致页面滚动条一直到顶部。我认为这可能与我编码方式中的错误有关，因为我对 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>

我正在使用的与此 div 相关的 CSS：

.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;
}
4

2 回答 2

6

,末尾有一个slow

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

演示：小提琴

于 2013-10-25T16:33:45.387 回答
0

没关系，我想通了；刚刚添加：

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


});
于 2013-10-25T16:47:08.087 回答