0
我想在div中使用jQuery .slideToggle（）從頂部向下滑動div（id =「testDiv」）。目前，滑動div內的div完全不顯示。下面是一些圖片來解釋我的意思：div內沒有出現Div？
你可以在這裏運行這個，但是這是以防萬一鏈接到一個Plunker我的代碼： https://plnkr.co/edit/fxulzV76HJ0APP0wqZkD?p=info
下面是代碼：
(function($){
$(document).ready(function(){
$('.selector').click(function() {
$('.dropDown').slideToggle(300);
});
$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});
$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
}); \t \t
})(jQuery);body{
margin:0;
padding: 0;
}
.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}
.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}
#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}
#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}
#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}
.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}
.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}
.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}
#infoDiv {
float: left;
margin-left: 17%;
}
#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}
#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>
<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<div class="dropdowns">
<div id="infoDiv">
</div>
<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
設置#testDiv以顯示：inherit;是最好的答案，恕我直言。 –