jQuery的幻燈片 - 如何處理div點擊

學習幻燈片n隱藏與jquery。無法粘貼代碼，因此請使用圖片代替。jQuery的幻燈片 - 如何處理div點擊

我有一個主div（黑色），裏面有3個div。 [實際上所有邊界都不可見]。藍色的div有內容，綠色就像它的標籤。任務是將內容向綠色的點擊向左滑動。

幻燈片工作正常。這是它現在的工作原理 - 只有綠色選項卡在頁面加載時可見。點擊整個紅色div內的任何地方，內容向左擴展。點擊黑色div內的任何地方，它會崩潰。

但這是我想要的。內容div（藍色）應該展開，只有當點擊divGreen而不是其他任何地方時。而且，如果點擊divBlack外部/內部的任何位置，它應該關閉。希望這是有道理的。

我試過$(".divGreen").click(function()，但幻燈片不起作用。

JS：

$(document).ready(function(){ 
    var r=0, dir=true; 
    $(".divBlack").click(function() { 
     dir = !dir; 
     r = dir? -280 : 0; 
     $(this).stop().animate({right: r+'px'}, 800); 
    }); 
});

HTML：

<div class="divBlack"> 
    <div class="divRed"> 
    <div class="divGreen"></div> 
    </div> 
    <div class="divBlue"></div> 
</div>

enter image description here

CSS：

.divBlack 
{ 
position:fixed; 
right:-280px; 
top:49%; 
width:300px; 
height:500px; 
} 
.divGreen 
{ 
float:left; 
width:33px; 
height:130px; 
margin-top:380px; 
} 
.divBlue 
{ 
float:right; 
width:260; 
height:500px; 
}

來源

2014-03-02 Ruby

試着把z-index：999999;爲div格林，並讓我知道結果 – Moussawi7

或與我分享代碼 – Moussawi7

什麼是CSS的樣子？ – Shadaez

嘗試

$(".divGreen").click(function(event){ 
    event.stopPropagation(); 
// uour code goes here 
});

詳細閱讀e.stoppropagation

來源

2014-03-02 09:15:10 Devjit

沒有工作.... – Ruby

元素有一個static位置不能移動。所以你需要設置position:relative

.divBlack{ 
    position:relative; 
}

來源

2014-03-02 09:20:34

jQuery的幻燈片 - 如何處理div點擊

回答

相關問題