个人中心
gpt4 book ai didi

javascript - div 内的 div 没有出现？

转载 作者：太空宇宙 更新时间：2023-11-03 21:21:01 24 4
gpt4 key购买 nike

我正在尝试将一个 div(id="testDiv") 放置在一个使用 jQuery .slideToggle() 从顶部向下滑动的 div 中。目前，滑动div中的div根本没有出现。这里有一些图片来解释我的意思:

enter image description here

enter image description here

您可以在此处运行它，但这是一个带有我的代码的 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);
        });
    });		
})(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>

最佳答案

在 #test div CSS 上设置 display:block 或 display:inherit;

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

关于javascript - div 内的 div 没有出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37333967/

24 4 0
文章推荐： python - 减少 pyinstaller exe 的大小
文章推荐： python - 从Python文本文件中检索特定html标签之间的文本
文章推荐： html - 仅针对左右 div，而非中间
文章推荐： c# - 带有自定义轴标签的 xaml c# 图表
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com