div內的div沒有出現？
[英]Div inside a div not appearing?
問題描述
我試圖將div（id =“ testDiv”）放置在使用jQuery .slideToggle（）從頂部向下滑動的div內。 目前，滑動div內的div根本沒有出現。 這是一些圖片來解釋我的意思：
您可以在此處運行它，但這是帶有我的代碼的柱塞的鏈接，以防萬一： 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); }); }); })(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>
3 個解決方案
解決方案1
2 已采納 2016-05-19 21:12:22
設置display: block或display:inherit; 在您的#test div CSS上
(function($){ $(document).ready(function(){ $('.selector').click(function () { $('.dropDown').slideToggle(300); }); $("#infoButton").click(function(){ $('#infoDiv').slideToggle(300); }); $("#searchButton").click(function(){ $('#searchDiv').slideToggle(300); }); }); })(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; display:inherit; }
<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>
解決方案2
1 2016-05-19 21:10:26
設置display: block; 用於#testDiv
您的.dropdowns div已隱藏
解決方案3
1 2016-05-19 21:12:03
#testDiv設置為display: none;
更新該div的樣式
#testDiv { display: block; }
Google地圖未出現在div中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.