onclick 第一次需要点击两次答案

【问题标题】：onclick requires two clicks the first timeonclick 第一次需要点击两次
【发布时间】：2018-04-30 19:43:00
【问题描述】：

我刚刚开始学习 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>

【问题讨论】：

山田的回答是正确的！您必须在样式表和标签内有声明 (display: none;)。

标签： javascript html css

【解决方案1】：

实际上，您的下拉内容在开始时没有任何样式，它有一个与之关联的 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>

【讨论】：

【解决方案2】：

在初始情况下，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 属性设置的内联样式声明具有相同（也是最高）的优先级。

【讨论】：

【解决方案3】：

HTML 元素的样式属性不是从应用于该元素的 css 样式派生而来的。因此，当您访问 style.display 时，您不会访问您的 #dropdown-content。相反，您可能会做一个 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>

【讨论】：

【解决方案4】：

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

【讨论】：

谢谢你的编辑，我现在只是用手机，所以我不能这样写:)

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

我遇到了同样的问题，基本上第一次点击会激活 Javascript 中的事件处理程序，而第二次点击才是真正起作用的。

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

<body onload="myFunction()">

这也将使使用手机时的第一次点击生效。

【讨论】：

【解决方案7】：

另一种方法，涉及到Dennis Spierenburg，答案是改变

    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";}
    }

到

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

【讨论】：