Div里面没有出现div？

时间：2016-05-19 21:04:39

标签： javascript jquery html css

我正在尝试将div（id =＆＃34; testDiv＆＃34;）置于div中，使用jQuery .slideToggle（）从顶部向下滑动。目前，滑动div内的div根本没有出现。这里有一些图片来解释我的意思：

enter image description here

enter image description here

你可以在这里运行它，但这是一个带有我的代码的Plunker链接以防万一： https://plnkr.co/edit/fxulzV76HJ0APP0wqZkD?p=info

以下是代码：

＆＃13;
＆＃13; 
(function($){
    $(document).ready(function(){
        $('.selector').click(function () {
            $('.dropDown').slideToggle(300);
        });

        $("#infoButton").click(function(){
            $('#infoDiv').slideToggle(300);
        });

        $("#searchButton").click(function(){
            $('#searchDiv').slideToggle(300);
        });
    });		
})(jQuery);
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

在display: block div CSS

上设置display:inherit;或#test 

(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>

答案 1 :(得分：1)

为display: block;

设置#testDiv

您的.dropdowns div已隐藏

答案 2 :(得分：1)

#testDiv设置为display: none;

更新div

的样式

#testDiv { display: block; }

相关问题
最新问题