Div in einem div nicht erscheint?

Ich versuche, ein div (id = "testDiv") innerhalb eines div zu platzieren, das von oben mit jQuery .slideToggle() heruntergleitet. Derzeit erscheint das div in der gleitenden div gar nicht. Hier sind einige Bilder zu erklären, was ich meine:Div in einem div nicht erscheint?

du hier laufen kann, aber dies ist ein Link zu einem Plunker mit meinem Code für alle Fälle: https://plnkr.co/edit/fxulzV76HJ0APP0wqZkD?p=info

Hier

ist der Code:

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

Quelle

2016-05-19 bicycle_guy

Set display: block oder display:inherit; auf #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); 
 
     }); 
 
    }); \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; 
 
    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>

Quelle

2016-05-19 21:12:22

Einstellung von #testDiv zur Anzeige: inherit; ist die beste Antwort, imho. –

Set display: block; für #testDiv

Ihre .dropdowns div sind

versteckt

Quelle

2016-05-19 21:10:26 jakob

Das funktionierte perfekt. So einfach. Vielen Dank! –

#testDiv ist auf display: none;

aktualisieren die Stile für die div

#testDiv { display: block; }

Quelle

2016-05-19 21:12:03 johnniebenson

Div in einem div nicht erscheint?

Antwort

Verwandte Themen