JavaScript onclick 需要兩次點擊

Question

我的問題是，當onclick觸發toggleNew函數時，它不會執行，但是當我第二次單擊div時，它會按照應有的方式執行...

HTML：

<div id="aside_main">
    <div onclick="toggleNew();">click</div>
    content
</div>
<div id="aside_new">
    content
</div>

JS：

function toggleNew() {
   var e = document.getElementById('aside_main');
   var se = document.getElementById('aside_new');
   if(e.style.display == 'block') {
    e.style.display = 'none';
    se.style.display = 'block';
   } else {
    e.style.display = 'block';
    se.style.display = 'none';
   }
}

CSS：

#aside_main {
  display: block;
} 
#aside_new {
  display: none;
}

這里發生了什么以及如何在用戶第一次單擊div時使該函數工作？

Answer 1

這將無法正常工作，因為您在 'div#aside_main' 中使用以下行，該行將被隱藏。

 <div onclick="toggleNew();">click</div>

試着像這樣把它放在外面——

<div onclick="toggleNew();">click</div>
 <div id="aside_main">
  content
 </div>
 <div id="aside_new">
  content2
</div>

同樣在 javascript 中，它不會在 if 條件下第一次檢查 'e.style.display'。

嘗試使用

    if(e.offsetWidth > 0 || e.offsetHeight > 0){
      e.style.display = 'none';
      se.style.display = 'block';
    }
    else
    {
      e.style.display = 'block';
      se.style.display = 'none';
    }

Answer 2

e.style.display表示由 style 屬性定義的元素的樣式，它不會為您提供計算樣式。 獲取計算樣式使用

if (window.getComputedStyle(e,null).getPropertyValue("display") == 'block){

Answer 3

您需要調用函數onclick="toggleNew();" 在 div onclick 中。 我剛剛在fiddle 中添加了您的代碼。

Answer 4

可能不是最好的答案，但解決方法是按樣式屬性使用內聯 css。 像這樣：

<div id="aside_main" style="display: block; border: 2px solid green;">
     <div onclick="toggleNew();">click</div>
     content
</div>
<div id="aside_new" style="display: none; border: 2px solid red;">
     content
</div>

Answer 5

我有同樣的雙擊所需的問題。 我正在使用一個內部樣式表，它可以像這樣正確設置顯示。 加載 HTML 文件時 #YourID 未按預期顯示。

#YourID {
    display: none;
}

單擊綁定到該功能的按鈕時，我注意到第一次單擊將內聯顯示設置為style="display: none;" . 第二次點擊設置inline style="display: block;" 當然，然后它按預期顯示。

我發現我需要用style="display: none;"直接內聯設置元素並剛剛刪除了實習生樣式表條目（“#YourID”上方）。

我懷疑這在每種情況下都是 100% 的正確答案，但似乎潛在問題是由於未將元素設置在適當的初始狀態以使函數正確對其進行操作造成的。

https://jsfiddle.net/em05a1kf

<div id="YourID" style="display: none;">
<b>Super Hidden Content</b>
</div>

<button onclick="ToggleID('YourID');">Do Foo</button>

<script type="text/javascript">
function ToggleID(idname) {
    var x = document.getElementById(idname);
    (x.style.display === "none") ? (x.style.display = "block") : (x.style.display = "none");
    return false;
}
</script>

Answer 6

在您的情況下：使用onclick="toggleNew();" // 調用

這是調用函數的方式。

如果你想傳遞函數，那么你只使用toggleNew //passing

它們是兩種不同的活動。

Answer 7

這是另一種方法。 你只需要在你的javascript代碼中添加兩行——

    document.getElementById('aside_main').style.display='block';
    document.getElementById('aside_new').style.display='none';

在 javascript 中設置初始顯示屬性。 這將正常工作。

Answer 8

解決這個問題的一種方法（對我來說是最簡單的方法）是計算點擊次數。

為此，您在函數 toggleNew() 之外將新的 intiger 變量 click 設置為 0，並且每次調用您的函數時，您都會增加變量 click 為 1，如下所示：

<script> var click = 0;
         function toggleNew() { 
         click = click +1;
         var e = document.getElementById('aside_main');
         var se = document.getElementById('aside_new');
         if (click > 1) {
                         if(e.style.display == 'block') {
                                                     e.style.display = 'none';
                                                     se.style.display = 'block';
                            } else {
                                     e.style.display = 'block';
                                     se.style.display = 'none';
                                    }        
          } else {    
                  e.style.display = 'none';
                  se.style.display = 'block';
                  }
        }
</script>