滑下div的关闭按钮 - jQuery

Question

我创建了一支笔：https://codepen.io/nickelse/pen/dROOGX

在第二个div上我想要滑动的关闭按钮，父div再次备份，我无法弄清楚它为什么不起作用，有什么建议吗？

＆＃13;

＆＃13;

$(".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");
});

＆＃13;

.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;}

＆＃13;

<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
		 <div class="close">Close</div>
	 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的z-index隐藏事件的div

我还将事件处理程序从点击更改为开启（＆＃34;点击＆＃34; ...因为 Difference between .on('click') vs .click()

＆＃13;

＆＃13;

$(".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");
});

＆＃13;

.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;}

＆＃13;

<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
		 <div class="close">Close</div>
	 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于.close块在父.container块内，因此需要将for call事件提升到父级之上。为此，您可以使用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
		 <div class="close">Close</div>
	 </div>
</div>