为什么我用slideToggle（“慢”）切换的div开始打开？

我在http://www.webdesignerwall.com/demo/jquery/（＃1样本滑动面板）中找到了我喜欢的滑动面板脚本，并在我的沙箱中进行了演奏。该示例中加载的页面和我的沙箱都已关闭。为什么我用slideToggle（“慢”）切换的div开始打开？

所以，我改变了一下，以适应自己的需要，并按照我想要的方式让它工作，并为我感到非常自豪，然后它打击了我 - 在我的实现中，页面加载打开。我需要它被关闭。

这让我很生气，尤其是因为他们还没有决定在我们的主项目中开始使用JQuery是否很酷，我在这里使用它，因为它是一个独立的工具。我知道管理层看起来真的很酷，并且希望他们会说，'那太好了。你们都应该在主项目中使用那个JQuery的东西。'

这里的页面本身：

<p class="slide" style="float: left; width: 10px;"> 
     <a href="#" id="slider_1" class="btn-slide"></a> 
    </p> 
    <span style="padding-left: .1em;">Filter</span> 
    <br /> 
    <div class="slidepanel" id="panel1" > 

    A TABLE 
    </div>

然后是jQuery脚本：

$(document).ready(function(){ 

    $(".btn-slide").click(function(){ 
     var number = $(this).attr("id").split("_")[1]; 
     $("#panel"+number).slideToggle("slow"); 
     $(".slide").toggleClass("active"); return false; 
    }); 

});

最后的CSS部分：

.slidePanel { 
    background: #754c24; 
    height: 400px; 
    display: none; 
} 


.slide { 
    margin: 0; 
    padding: 0; 
    background: url(../images/menu_closed.gif) no-repeat center top; 
} 


.btn-slide { 
    background: url(../images/menu_closed.gif) no-repeat right -50px; 
    text-align: center; 
    width: 144px; 
    height: 31px; 
    margin: 0 auto; 
    display: block; 
    font: bold 120%/100% Arial, Helvetica, sans-serif; 
    color: #fff; 
    text-decoration: none; 
} 


.active { 
    background: url(../images/menu_open.gif) no-repeat center top; 
}

来源

2009-07-28 aape

根据您的文档类型，css类名称区分大小写。尝试改变你的课程.slidepanel – Joel 2009-07-28 13:43:48

您引用了一个CSS类的slidePanel，但是在CSS部分中它被定义为slidepanel。 CSS在大多数常见的文档类型中区分大小写，但不管文档类型如何，通用的最佳做法是尊重大小写。

来源

2009-07-28 13:46:43

圣牛！你是对的。谢谢。 – aape 2009-07-28 13:59:00

只是把style="display:none"在面板上的标记，这样它就会开始隐藏起来。

来源

2009-07-28 13:43:02

Wooo hoooo！谢谢！ – aape 2009-07-28 13:45:32

这更像是一种黑客行为，因为CSS外壳问题是导致面板未被隐藏的真正原因。 sidePanel css定义了该元素应该隐藏，所以一旦解决了CSS外壳问题，它将按预期工作。 – 2009-07-28 13:48:14

好赶，我没注意到:-P – 2009-07-28 18:11:52

为什么我用slideToggle（“慢”）切换的div开始打开？

回答

相关问题