使用正確的方法

z索引我要創建一個簡單的滑動件如我已經在PIC所示..我有兩個div包裝器1和wrapper2通過的20像素的餘量分離，我在包裝1點擊一個按鈕上一個新的div應該降下來滑動應該進來的包裝1和2的前面，

是香港專業教育學院使用的是

<div id="wrapper1" style="width:960px; height:200px;z-index:100;"> 
<a href="#" class="clickMe"> 
    <div id="tab1"> 
    </div> 
</a> 
<div id="slider" style="width:400px; height:100px; z-index:999;"> 
</div> 
</div> 
<div id="wrapper2" style="width:960px; height:200px; z-index:100;"> 
</div>

和腳本看起來像

代碼

$(document).ready(function() 
{ 
$("#slider").css({"display":"none"}); 
$(".clickMe").click(function() 
{ 
$("#slider").slideDown("slow"); 
} 
); 
});

使用此代碼，我得到的是滑動窗口通過向下推動wrapper2而不是前來滑動。可能是什麼問題？

來源

2012-05-26 user1371896

注：Ive上傳的照片是我希望我的網站成爲的方式。 – user1371896

'wrapper2'在哪裏？ – chucktator

固定....... – user1371896

我把fiddle放在一起。

下面是相關代碼： HTML

<div id="wrapper1"> 
    <div class="clickMeWrapper"> 
    <a class="clickMe" id="tab1" href="#">Click Me!</a> 
    <div class="slider"> 
    </div> 
    </div> 
    <div class="clickMeWrapper"> 
    <a class="clickMe" id="tab1" href="#">Click Me! 
    </a> 
    <div class="slider"> 
    </div> 
    </div> 
</div> 
<div id="wrapper2"> 
</div>

jQuery的

$(document).ready(function() { 
    $(".slider").hide(); 
    $(".clickMeWrapper").click(function(e) { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
     $(this).children(".slider").slideToggle("slow"); 
    }); 
});

如果有什麼不清楚，請讓我知道。

來源

2012-05-26 14:01:10

Thnx ...這一個wrkd ...我有一個疑問...我們使用「＃」「爲href鏈接，所以當我們點擊按鈕時，哈希符號gts附加到URL ..所以，我阻止了frm hpning ?? – user1371896

我編輯了小提琴和代碼（jQuery部分）。這應該工作。如果確實如此，請將此答案標記爲正確。 –

還有一件事，是否可以定位滑塊？ IVe嘗試了左和頂，但它沒有wrk .. – user1371896

我想你應該把position:absolute;加到「滑塊」上，並設置它的位置。

來源

2012-05-26 12:54:12 CoursesWeb

那個力量做的伎倆 – user1371896

您必須將slider放在包裝器元素之外，否則父子關係將覆蓋某些格式化規則，如z-index。 position:absolute和其他css屬性應該由jQuery自動設置。

來源

2012-05-26 13:22:59 chucktator

你需要一個絕對的位置z-index工作。

來源

2012-06-09 17:13:47

使用正確的方法

回答

相關問題