onclick第一次需要两次点击

Question

我刚开始学习JavaScript。

我写了一个简单的下拉菜单，但是当你最初加载页面时，“下拉”按钮上的两次点击 - 按钮（带有 onclick 属性）是必需的要显示的链接列表。

之后，它按预期工作 - 您只需在按钮上单击一次即可显示/隐藏列表。

但为什么在最初加载网站后我必须在按钮上点击两次？

这是我的HTML / CSS：

#dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

#dropdown {
    position: relative ;
    display: inline-block;
}

#dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

#dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

#dropdown-content a:hover {background-color: #f1f1f1}

/*#dropdown:hover #dropdown-content {
    display: block;
}*/

#dropdown:hover #dropbtn {
    background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>
<p>Just a simple menu with link list</p>

<div id="dropdown">
  <button id="dropbtn" onclick="myFunction()">Dropdown</button>
  <div id="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<script>

function myFunction() {
if (document.getElementById('dropdown-content').style.display == "none") 
         {document.getElementById('dropdown-content').style.display = "block";}
else {document.getElementById('dropdown-content').style.display = "none";}
    
    
}

</script>

Answer 1

在初始情况下，display属性的值将是未定义的，除非您使用内联样式属性设置css属性，因此切换if条件和代码块。

function myFunction() {
  // cache the element for later use, which is one of the best practice 
  var ele = document.getElementById('dropdown-content');

  if (ele.style.display == "block") {
    ele.style.display = "none";
  } else {
    ele.style.display = "block";
  }
}

#dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#dropdown {
  position: relative;
  display: inline-block;
}

#dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#dropdown-content a:hover {
  background-color: #f1f1f1
}


/*#dropdown:hover #dropdown-content {
    display: block;
}*/

#dropdown:hover #dropbtn {
  background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>
<p>Just a simple menu with link list</p>

<div id="dropdown">
  <button id="dropbtn" onclick="myFunction()">Dropdown</button>
  <div id="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<script>
  function myFunction() {
    // cache the element for later use 
    var ele = document.getElementById('dropdown-content');
    if (ele.style.display == "block") {
      ele.style.display = "none";
    } else {
      ele.style.display = "block";
    }
  }
</script>

或使用内联样式属性设置display属性。

<div id="dropdown-content" style="display:none">
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
</div>

#dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#dropdown {
  position: relative;
  display: inline-block;
}

#dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#dropdown-content a:hover {
  background-color: #f1f1f1
}


/*#dropdown:hover #dropdown-content {
    display: block;
}*/

#dropdown:hover #dropbtn {
  background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>
<p>Just a simple menu with link list</p>

<div id="dropdown">
  <button id="dropbtn" onclick="myFunction()">Dropdown</button>
    <div id="dropdown-content" style="display:none">
     <a href="#">Link 1</a>
     <a href="#">Link 2</a>
     <a href="#">Link 3</a>
    </div>
</div>
<script>
  function myFunction() {
    // cache the element for later use 
    var ele = document.getElementById('dropdown-content');
    if (ele.style.display == "none") {
      ele.style.display = "block";
    } else {
      ele.style.display = "none";
    }
  }
</script>

Taken from MDN Docs :

  

HTMLElement.style属性用于获取和设置元素的内联样式。获取时，它返回一个CSSStyleDeclaration对象，该对象包含该元素的所有样式属性的列表，并为元素的inline style attribute中定义的属性指定值。有关可通过样式访问的CSS属性的列表，请参阅CSS属性参考。 style属性在CSS级联中具有与通过style属性设置的内联样式声明相同（和最高）的优先级。

Answer 2

HTML元素的style属性不是从应用于元素的css样式派生的。因此，当您访问#dropdown-content时，您无法访问style.display。相反，你可能会做一个css类，你可以根据它的状态添加或删除它。

从您的代码中采用的示例：

#dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#dropdown {
  position: relative;
  display: inline-block;
}

.hide {
  display: none;
}

#dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#dropdown-content a:hover {
  background-color: #f1f1f1
}


/*#dropdown:hover #dropdown-content {
    display: block;
}*/

#dropdown:hover #dropbtn {
  background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>
<p>Just a simple menu with link list</p>

<div id="dropdown">
  <button id="dropbtn" onclick="myFunction()">Dropdown</button>
  <div id="dropdown-content" class="hide">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<script>
  function myFunction() {
    let element = document.getElementById('dropdown-content');
    if (element.classList.contains('hide')) {
      element.classList.remove('hide')
    } else {
      element.classList.add('hide')
    }


  }
</script>

Answer 3

实际上你的下拉内容在开头没有样式，它有一个与之相关的CSS。只需在声明中声明display：none即可，它将按预期工作。

#dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

#dropdown {
    position: relative ;
    display: inline-block;
}

#dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

#dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

#dropdown-content a:hover {background-color: #f1f1f1}

/*#dropdown:hover #dropdown-content {
    display: block;
}*/

#dropdown:hover #dropbtn {
    background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>
<p>Just a simple menu with link list</p>

<div id="dropdown">
  <button id="dropbtn" onclick="myFunction()">Dropdown</button>
  <div id="dropdown-content" style="display: none">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<script>

function myFunction() {
if (document.getElementById('dropdown-content').style.display == "none") 
         {document.getElementById('dropdown-content').style.display = "block";}
else {document.getElementById('dropdown-content').style.display = "none";}
    
    
}

</script>

Answer 4

我遇到了同样的问题，基本上第一次单击激活了Javascript中的事件处理程序，第二次单击实际上是有效的。

要解决此问题，请在页面加载到HTML文件后立即调用事件处理程序：

<body onload="myFunction()">

这也将使使用电话时的第一次单击有效。

Answer 5

只需将none替换为block，将block替换为函数中的none，这就是您所需要的。

Answer 6

@sdleihssirhc在另一篇文章中讲述了如何检查元素是否被显示。看看这个post。

return element.currentStyle ? element.currentStyle.display :
                          getComputedStyle(element, null).display;

这将为您提供样式元素的值。