在javascript中隱藏和顯示div

-5

我想要顯示然後隱藏div，但是當我點擊按鈕時，它不會第一次工作，當我點擊第二次它正常工作。我希望它能在第一次點擊時起作用。在javascript中隱藏和顯示div

HTML

<p>Click the button</p> 
    <button onclick="myFunc()">Try it</button> 
    <div id="divi"> 
    Div region 
    </div>

CSS

 #divi { 
     width: 50%; 
     padding: 50px 0; 
     text-align: center; 
     background-color: #ccc; 
     margin-top:20px; 
     display:none; 
    }

的Javascript

 function myFunc() { 
     var dv = document.getElementById('divi'); 
     if (dv.style.display ==='none') { 
     dv.style.display = 'block'; 
     } else { 
     dv.style.display = 'none'; 
     } 
     }

這裏是筆：https://codepen.io/animaxf/pen/xdVVbK

來源

2017-04-20 Ans

當您單擊的第一次按鈕，將其設置'顯示：none'，那麼第二次'顯示：block'。 – billett

這是因爲在技術上，樣式屬性因此style.display實際上是null。所以首先點擊display:none;。

如果更改JavaScript的是：

function myFunc() { 
    var dv = document.getElementById('divi'); 
    if (dv.style.display === 'block') { 
    dv.style.display = 'block'; 
    } else { 
    dv.style.display = 'none'; 
    } 
}

基本上確認這是塊第一 - 它會工作。

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    if (dv.style.display === 'block') { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display:none; 
 
}

<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div>

來源

2017-04-20 14:51:31 Albzi

這個答案似乎有點黑客，只會在div開始隱藏 – Pete

添加此 <div id="divi" style="display:none">

第一次，顯示是不是你的DIV定義

來源

2017-04-20 14:51:50 Epitouille

當您單擊首次沒有樣式應用（DV .style.display =「」）因此，dv.style.display！=='none'成爲true，dv.style.display ='none'被應用。

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    
 
    if (dv.style.display !=='none'&& dv.style.display !=="") { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display:none; 
 
}

<body> 
 

 
<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div> 
 

 
</body>

來源

2017-04-20 14:52:23 Knitesh

沒有當您單擊第一次display屬性集。只需切換屬性 - 它將起作用。

https://codepen.io/anon/pen/XRddvd

來源

2017-04-20 14:53:10 Mary

第一次單擊該按鈕，CSS屬性display沒有設置呢，所以當點擊它發生檢查而dv.style.display !== 'none'，而實際上dv.style.display === ''

你可以在你的代碼解決這個問題，或者您可以簡單地更改CSS，因爲它是更優雅的解決方案。只要在它的CSS定義中應用display: block（或display: none根據你的如意開始狀態）到#divi。

來源

2017-04-20 14:53:15

這是因爲您更改div的樣式，但display:none屬性位於類元素內。所以，div第一次沒有顯示屬性，並聲明它爲none。若要解決此問題，請將style="display:none;放在div上，而不是在css文件中聲明它

來源

2017-04-20 14:53:21

首先單擊讓它落入else語句並顯示它。

之後，你處於一個良好的循環。

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    if (dv.style.display == 'block') { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display: none; 
 
}

<body> 
 

 
<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div> 
 

 
</body>

來源

2017-04-20 14:53:50

當你第一次加載頁面，這個類是未申報的意思，你聲明if (dv.style.display !=='none')將返回true，然後應用顯示PROPERT dv.style.display = 'none';

相反，你應該使用if (dv.style.display =='block')來檢查是否顯示。

function myFunc() { 
 
    var dv = document.getElementById('divi'); 
 
    if (dv.style.display =='block') { 
 
     dv.style.display = 'none'; 
 
    } else { 
 
     dv.style.display = 'block'; 
 
    } 
 
}

#divi { 
 
    width: 50%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: #ccc; 
 
    margin-top:20px; 
 
    display:none; 
 
}

<body> 
 

 
<p>Click the button</p> 
 

 
<button onclick="myFunc()">Try it</button> 
 

 
<div id="divi"> 
 
Div region 
 
</div> 
 

 
</body>

來源

2017-04-20 14:56:32

在javascript中隱藏和顯示div

回答

相關問題