javascript - 向下滑动div上的关闭按钮 - jQuery

Question

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

在第二个 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
		 <div class="close">Close</div>
	 </div>
</div>

Answer 1

您的 z-index 隐藏了事件的 div

我还将事件处理程序从 click 更改为 on("click"... 因为 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
		 <div class="close">Close</div>
	 </div>
</div>