上滑下DIV關閉按鈕 - jQuery的

我創建了一個筆：https://codepen.io/nickelse/pen/dROOGX 上滑下DIV關閉按鈕 - jQuery的

二號DIV我想關閉按鈕父DIV滑回來了，我想不通爲什麼它的不工作，有什麼建議？

$(".one").click(function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // do your worst, i.e. slide down 
 
    $(".two").slideDown("slow"); 
 
}); 
 

 
$(".close").click(function() { 
 
    // slide up 
 
    $(".two").slideUp("slow"); 
 
});

.container { 
 
    overflow:hidden; 
 
    height: 60px; 
 
} 
 

 
.one { 
 
    position: relative; 
 
    top: 0; 
 
    background-color: lightblue; 
 
    z-index: 1; 
 
} 
 

 
.two { 
 
    position: relative; 
 
    background-color: yellow; 
 
    z-index: -1; 
 
    display:none; 
 
} 
 
/* 
 
.one:hover + .two { 
 
    top: 0px; 
 
}*/ 
 

 
.red-cell {background: red!important;} 
 
.close {background: red; display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="one">click me to reveal new div</div> 
 
    <div class="two">Search</div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="one">click me to reveal new div</div> 
 
    <div class="two">Login 
 
\t \t <div class="close">Close</div> 
 
\t </div> 
 
</div>

來源

2017-06-16 Nick Else

你的z-index隱藏事件 – mplungjan

我想，如果你把開放部分公司內部的密切一部分，那麼它會工作的股利。只有當公開部分被觸發後，它纔會綁定關閉操作。請注意，on（）是觸發器的最新功能。很高興創建一個答案，如果這個工程。 – Antony

排序，歡呼聲mrplungjan –

你的z-index隱藏在div事件

我也改變從點擊的事件處理程序上（「點擊」 ......因爲 Difference between .on('click') vs .click()

$(".one").on("click",function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // do your worst, i.e. slide down 
 
    $(".two").slideDown("slow"); 
 
}); 
 

 
$(".close").on("click",function() { 
 
    // slide up 
 
    $(".two").slideUp("slow"); 
 
});

.container { 
 
    overflow:hidden; 
 
    height: 60px; 
 
} 
 

 
.one { 
 
    position: relative; 
 
    top: 0; 
 
    background-color: lightblue; 
 
    z-index: 1; 
 
} 
 

 
.two { 
 
    position: relative; 
 
    background-color: yellow; 
 
    /* z-index: -1; */ 
 
    display:none; 
 
} 
 
/* 
 
.one:hover + .two { 
 
    top: 0px; 
 
}*/ 
 

 
.red-cell {background: red!important;} 
 
.close {background: red; display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="one">click me to reveal new div</div> 
 
    <div class="two">Search</div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="one">click me to reveal new div</div> 
 
    <div class="two">Login 
 
\t \t <div class="close">Close</div> 
 
\t </div> 
 
</div>

來源

2017-06-16 07:51:09 mplungjan

由於.close塊位於父代.container塊內部，因此需要將調用事件提升到父代以上。爲此，您可以使用z-index：

$(".one").click(function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // do your worst, i.e. slide down 
 
    $(".two").slideDown("slow"); 
 
}); 
 

 
$(".close").click(function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // slide up 
 
    $(".two").slideUp("slow"); 
 
});

.container { 
 
    overflow:hidden; 
 
    height: 60px; 
 
    z-index:-1; 
 
} 
 

 
.one { 
 
    position: relative; 
 
    top: 0; 
 
    background-color: lightblue; 
 
} 
 

 
.two { 
 
    position: relative; 
 
    background-color: yellow; 
 
    display:none; 
 
} 
 
/* 
 
.one:hover + .two { 
 
    top: 0px; 
 
}*/ 
 

 
.red-cell {background: red!important;} 
 
.close {background: red; display:block;z-index:100;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="one">click me to reveal new div</div> 
 
    <div class="two">Search</div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="one">click me to reveal new div</div> 
 
    <div class="two">Login 
 
\t \t <div class="close">Close</div> 
 
\t </div> 
 
</div>

來源

2017-06-16 07:53:42

我懷疑你的答案和我的一樣，但是你沒有告訴我們你改變了什麼 – mplungjan

補充...抱歉... –

上滑下DIV關閉按鈕 - jQuery的

回答

相關問題