Javascript 在 HTML 中更改了我的 Div 的格式

Question

我是 JS 新手，HTML 和 CSS。我试图建立一个类似汽车经销店的网站来练习我到目前为止所学的知识，但我遇到了这个问题。我制作了一个 div ，它会在使用 JS 方法触发时模拟用户下拉菜单。我使用的方法是当用户点击汽车品牌列表时它会显示隐藏的div。但是发生的事情是，如果没有 JS，我的下拉菜单设计一切都很好，但是当 JS 被插入到等式中时，它会像没有任何 CSS 的情况下那样格式化它。这是一张图片供参考。第一个是它应该如何，第二个是它在 JS 中的样子。请原谅我对堆栈溢出工具的错误使用。我也是新来的

var carListDropdown = document.getElementById("car-brand-dropdown")
carListDropdown.style.display = "none";

function carListDrop(){
    if(carListDropdown.style.display === "none"){
        carListDropdown.style.display = "block";
    } else {
        carListDropdown.style.display = "none";
    }
}

#car-brand-dropdown {
  background: black;
  height: 350px;
  width: 500px;
  color: white;
  display: flex;
  justify-content: space-around;
  margin-right: 90px;
  position: absolute;
  border-radius: 5px;
  margin-top: 2px;
  transform: translateX(700px);
  z-index: 1;
}

<div class="car-brand-list" onclick="carListDrop()">Car Brands</div>

<div id="car-brand-dropdown">
        <ul class="car-brand-list-one">
          <li><a href="#">Aston Martin</a></li>
          <li><a href="#">Audi</a></li>
          <li><a href="#">Bentley</a></li>
          <li><a href="#">BMW</a></li>
          <li><a href="#">Chevrolet</a></li>
          <li><a href="#">Dodge</a></li>
          <li><a href="#">Fiat</a></li>
          <li><a href="#">Ford</a></li>
        </ul>
        <ul class="car-brand-list-two">
          <li><a href="#">Honda</a></li>
          <li><a href="#">Jaguar</a></li>
          <li><a href="#">Jeep</a></li>
          <li><a href="#">KIA</a></li>
          <li><a href="#">Lamborghini</a></li>
          <li><a href="#">Land Rover</a></li>
          <li><a href="#">Lexus</a></li>
          <li><a href="#">Lotus</a></li>
        </ul>
        <ul class="car-brand-list-three">
          <li><a href="#">Mazda</a></li>
          <li><a href="#">Mercedes-Benz</a></li>
          <li><a href="#">Mini</a></li>
          <li><a href="#">Mitsubishi</a></li>
          <li><a href="#">Nissan</a></li>
          <li><a href="#">Porsche</a></li>
          <li><a href="#">Subaru</a></li>
          <li><a href="#">Toyota</a></li>
          <li><a href="#">Volkswagen</a></li>
        </ul>  
    </div>

How it should look like

How it looks with JS inserted into the program

Answer 1

编辑这个

var carListDropdown = document.getElementById("car-brand-dropdown")
carListDropdown.style.display = "none";

function carListDrop(){
 if(carListDropdown.style.display === "none"){
    carListDropdown.style.display = "flex";
 } else {
    carListDropdown.style.display = "none";
 }
}

Answer 2

您最好使用 addEventListener，但不要使用 html onclick 属性。

JS:

document.querySelector('.car-brand-list').addEventListener('click',function(){
  carListDrop();
})

Answer 3

我删除了你的整个 JS，因为它不需要。我们可以直接用 onclick-trigger
出于特定权重的原因，我将元素的 ID 更改为 class。
我添加了一个包含 display: none; 的 class (.none) 来隐藏该元素。
我把 onclick-trigger 改成了 document.querySelector('.car-brand-dropdown').classList.toggle('none');

document.querySelector('.car-brand-dropdown') 将 select 你的列表就像 getElementById 只是可用于 select calsses, ID, tags...

classList.toggle('none) 将删除 class .none 如果元素有此 class 并添加它，如果元素没有此 class。所以不需要 if/else-statments.

.car-brand-dropdown {
  background: black;
  height: 350px;
  width: 500px;
  color: white;
  display: flex;
  justify-content: space-around;
  margin-right: 90px;
  position: absolute;
  border-radius: 5px;
  margin-top: 2px;
  transform: translateX(700px);
  z-index: 1;
}

.none {
  display: none;
}

<div class="car-brand-list" onclick="document.querySelector('.car-brand-dropdown').classList.toggle('none');">Car Brands</div>

<div class="car-brand-dropdown none">
        <ul class="car-brand-list-one">
          <li><a href="#">Aston Martin</a></li>
          <li><a href="#">Audi</a></li>
          <li><a href="#">Bentley</a></li>
          <li><a href="#">BMW</a></li>
          <li><a href="#">Chevrolet</a></li>
          <li><a href="#">Dodge</a></li>
          <li><a href="#">Fiat</a></li>
          <li><a href="#">Ford</a></li>
        </ul>
        <ul class="car-brand-list-two">
          <li><a href="#">Honda</a></li>
          <li><a href="#">Jaguar</a></li>
          <li><a href="#">Jeep</a></li>
          <li><a href="#">KIA</a></li>
          <li><a href="#">Lamborghini</a></li>
          <li><a href="#">Land Rover</a></li>
          <li><a href="#">Lexus</a></li>
          <li><a href="#">Lotus</a></li>
        </ul>
        <ul class="car-brand-list-three">
          <li><a href="#">Mazda</a></li>
          <li><a href="#">Mercedes-Benz</a></li>
          <li><a href="#">Mini</a></li>
          <li><a href="#">Mitsubishi</a></li>
          <li><a href="#">Nissan</a></li>
          <li><a href="#">Porsche</a></li>
          <li><a href="#">Subaru</a></li>
          <li><a href="#">Toyota</a></li>
          <li><a href="#">Volkswagen</a></li>
        </ul>  
    </div>

Answer 4

Flex 容器的“默认”值使用 column 作为方向，而对于您的布局，您确实希望使用 row。父容器中的单个 ul 元素可以保留为 block 级项目，父容器将分配给它 flex 属性。使用 Javascript 您可以使用 classList.toggle 轻松切换项目的外观 ~ 使用内联 node.style.display=... 类型语法可以节省，因为您可以使用 CSS.[= 更轻松地定义外观22=]

相比添加 inline 事件处理程序，通常认为使用 external event listener -done using addEventListener 是更好的做法。这使得 HTML 标记更清晰，当事件处理程序存储在外部文件中时，这意味着它们可以通过包含该脚本在其他页面中引用。

/* two utility functions to shorten querySelector calls */
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);

/* find the HTML elements of interest */
const oDiv=q('.car-brand-list');
const oSel=q('#car-brand-dropdown');

/* 
 add an event handler that toggles the class of the `select` type div, 
 modifies the class of the clicked text and resets the dataset attribute
 that displays the hyperlink text when clicked.
*/
oDiv.addEventListener('click',function(e){
  oSel.classList.toggle('flex');
  this.classList.toggle('active');
  oDiv.dataset.brand='';
});

/*
  assign a click handler to each hyperlink - the functionaliyt of the
  hyperlinks is unclear but here it is used to display the brand selected.
*/
qa('ul[class^="car-brand"] > li > a').forEach( a=>a.addEventListener('click',function(e){
  e.preventDefault();
  oDiv.dataset.brand=this.textContent
}));

*{font-family:monospace;}
a{ 
  color:white!important;
  text-decoration:none;
}
.car-brand-list{
  font-size:1.5rem;
  padding:0.25rem;
  cursor:pointer;
  font-weight:bold;
  width:100px;
}
.car-brand-list.active{ 
  background:black;
  color:white;
  border-radius:0.25rem;
}
.car-brand-list:after{
  content:" - "attr(data-brand);
  color:gray;
}
[data-brand='']:after{
  content:'';
}

#car-brand-dropdown {
  background: black;
  max-height:350px;
  color: white;
  display:none;
  border-radius:1rem;
  transition:ease-in-out all 250ms;
  z-index: 1;
}
.car-brand-list,
#car-brand-dropdown{width:500px;}

.flex{
  display:flex!important;
  justify-content:space-around;
  flex-direction:row;
  flex-wrap:nowrap;
  margin:0.25rem auto;
}

ul{
  flex:1;
  margin:1rem;
  padding:1rem;
  list-style:none;
}

ul li{
  padding:0.1rem;
  font-size:90%;
}

<div class='car-brand-list' data-brand>Car Brands</div>
<div id='car-brand-dropdown'>
    <ul class='car-brand-list-one'>
      <li><a href='#'>Aston Martin</a></li>
      <li><a href='#'>Audi</a></li>
      <li><a href='#'>Bentley</a></li>
      <li><a href='#'>BMW</a></li>
      <li><a href='#'>Chevrolet</a></li>
      <li><a href='#'>Dodge</a></li>
      <li><a href='#'>Fiat</a></li>
      <li><a href='#'>Ford</a></li>
    </ul>
    <ul class='car-brand-list-two'>
      <li><a href='#'>Honda</a></li>
      <li><a href='#'>Jaguar</a></li>
      <li><a href='#'>Jeep</a></li>
      <li><a href='#'>KIA</a></li>
      <li><a href='#'>Lamborghini</a></li>
      <li><a href='#'>Land Rover</a></li>
      <li><a href='#'>Lexus</a></li>
      <li><a href='#'>Lotus</a></li>
    </ul>
    <ul class='car-brand-list-three'>
      <li><a href='#'>Mazda</a></li>
      <li><a href='#'>Mercedes-Benz</a></li>
      <li><a href='#'>Mini</a></li>
      <li><a href='#'>Mitsubishi</a></li>
      <li><a href='#'>Nissan</a></li>
      <li><a href='#'>Porsche</a></li>
      <li><a href='#'>Subaru</a></li>
      <li><a href='#'>Toyota</a></li>
      <li><a href='#'>Volkswagen</a></li>
    </ul>  
</div>

Javascript 在 HTML 中更改了我的 Div 的格式

Javascript changes the format of my Div in HTML

html

javascript

css

display