个人中心
gpt4 book ai didi

javascript - 添加到 li 时增加 div 的大小

转载 作者：太空宇宙 更新时间：2023-11-04 06:24:56 26 4
gpt4 key购买 nike

目标:

我正在开发一个带有菜单和子菜单的导航的个人元素。在父列表中有一个输入，当我提交到输入时，我希望它添加到菜单中。当它添加时，我希望它所在的容器的大小也随之增加。

问题:

当我添加到列表中时，我无法获得正确的公式来增加框的大小，因为我添加到列表中。我列出了元素，但它们最终都超出了盒子的边界。请参阅下面的外观:

first

这是我添加任何内容之前的样子:

second

这是我的 html:

<!DOCTYPE html>
<html>
<head>
<title>Drop Down Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


</head>

<body>

<!--Navbar-->
  <header class="container">
    <nav id="nav1">
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Foundation</a></li>
        <li><a href="#" class="dropdown">Downloads <i class="fas fa-angle-down"></i></a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
    <div class="dropdown1">
       <ul id="listAdd">
        <li>Sample Menu</li>
        <li><a href="#">Movies</a></li>
        <li class="submenu1"><a href="#">Television <i class="fas fa-angle-right"></i></a></li>
        <li><a href="#">E-Books</a></li>
        <li class="submenu2"><a href="#" >Software <i class="fas fa-angle-right"></i></a></li>
        <li><a href="#">Images</a></li>

      </ul>
      <input placeholder="Input" class="inputBar" id="form"><a href="#" id="searchGlass"><i class="fas fa-search fa-xs" id="magGlass"></i></a>
    </div>
        <div class="dropdown2">
       <ul>
        <li>Top Movies</li>
        <li><a href="#">Friday</a></li>
        <li><a href="#">Avengers</a></li>
        <li><a href="#">Dark Knight</a></li>
        <li><a href="#">Transformers</a></li>
        <li><a href="#">The Notebook</a></li>

      </ul>
    </div>
        <div class="dropdown3">
       <ul>
        <li>Top Software</li>
        <li><a href="#">Adobe</a></li>
        <li><a href="#">Gimp</a></li>
        <li><a href="#">Microsoft Office</a></li>
        <li><a href="#">Rosetta Stone</a></li>

      </ul>
    </div>
  </header>
<!--End of Navbar-->


<script src="script.js"></script>
</body>

</html>

这是我为这部分编写的 javascript:

 const dropdown = document.querySelector('.dropdown1');
 const list = document.querySelector('#listAdd');


document.getElementById("searchGlass").addEventListener("click", function(e){

    e.preventDefault(); 
    fn = document.getElementById("form").value;
    console.log(fn);
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(fn));
    list.appendChild(entry);
    let increase = 10;
    dropdown.style.width = '300px' + increase;
});

添加 CSS:

.container{
  width:1920px;
  margin: 0px;
}

.dropdown1{
  background-color:#444444;
  width:200px;
  height:300px;
  margin-left:204px;
  margin-top:0px;
  display:none;
  box-shadow: 0px 0px 10px #999;
  /*if I do not use position absolute everything will get pushed down*/
  position: absolute;



}

.dropdown1:before, .dropdown1:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
}
.dropdown1:before {
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: #444444;
}
.dropdown1:after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #444444;
}

.dropdown1 ul{
  padding:20px;
  list-style-type: none;
}

.dropdown1 li{
  padding-bottom:5px;
  border-bottom: 1px solid grey;
}

.dropdown1 li:first-child{
  color:white;
}

.dropdown1 a{
  text-decoration:none;
  color:white;
  font-size:12px;

}
.dropdown1 li a:active {
   background-color: black;
}
.dropdown1 li:hover {
   background-color: black;
}


.dropdown1 input{
  color:white;
  border:none;
  padding-top:5px;
  height:10px;
  margin-left:20px;
}
.dropdown1 li:nth-child(3) i{
  color:white;
  margin-left:90px;
}
.dropdown1 li:nth-child(5) i{
  color:white;
  margin-left:98px;
}

#listAdd{
  margin:0;
}


.inputBar{
  width:120px;
  background-color:#444444;
  border: 1px solid transparent;
  box-shadow: 0px 0px 10px #999;
}

input, select, textarea{
    color: white;
}

#searchGlass{
  margin-left:10px;
  padding:0;
  text-align:center;
  vertical-align:middle;

}

#magGlass{
  width:20px;
  height:20px;
}

最佳答案 

.dropdown1{
    height: 300px; // <-- don't use height
    min-height: 300px; // <-- use min height
}

如果您希望 div 在添加新元素时扩展，请确保使用最小高度而不是固定高度。

关于javascript - 添加到 li 时增加 div 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55166869/

26 4 0
文章推荐： c - 第 5 次扫描后出现段错误
文章推荐： java - 更高或更低的游戏Java
文章推荐： c - 指针没有取新值
文章推荐： java - 如何使用freebase api获取一个城市的所有旅游景点？我只能从返回的 JSON 中获取 10
太空宇宙
个人简介

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

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