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点击

回答

相关问题