爲什麼我用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開始打開？

回答

相關問題