第二次點擊關閉DIV，爲什麼？

我有一個JavaScript函數應該關閉點擊div。但是，它在第二次點擊時起作用。我怎樣才能避免這種情況？第二次點擊關閉DIV，爲什麼？

的JavaScript

function showhide(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') { 
     e.style.display = 'none'; 
    } else { 
     e.style.display = 'block'; 
    } 
}

HTML

<div id="foota123"> 
    Content 
    <div onclick="showhide('foota123')" class="iks">X</div> 
</div>

來源

2015-02-09 user198989

'foota123'的初始樣式是什麼？ – sideroxylon 2015-02-09 00:20:30

.mydiv { position：relative; z-index：115 } – user198989 2015-02-09 00:22:00

您正在展示一個常規的JavaScript函數，但您用jQuery標記了問題，那麼爲什麼不使用jQuery？ – 2015-02-09 00:28:50

e.style指DIV（樣式的樣式屬性=」。 ..「）。第一次通過時，div上沒有style屬性。條件是虛假和代碼設置的樣式屬性：

<div style="display: block">

第二次通過，如果條件爲真，且塊的樣式設置爲「無」。所以它消失了。

來源

2015-02-09 00:29:17 bobdye

剛剛添加並運行良好。謝謝！簡單是美麗的。 – user198989 2015-02-09 00:32:45

'style =「block」'？ – 2015-02-09 00:40:01

不應該是'style =「display：block」'？ – DelightedD0D 2015-02-09 00:41:51

您的代碼不處理元素的計算樣式，因此在第一次單擊元素仍處於display:block。

使用jQuery試試這個：

function showhide(id) { 
    $('#'+id).toggle(); 
}

$.toggle()將顯示元素，如果它隱藏其他隱藏。

來源

2015-02-09 00:25:46 Arvind

試試這個，如果你想直接的JavaScript，jQuery的答案是更好的雖然:)

function showhide(id) { 
 
    var e = document.getElementById(id); 
 
    if( e.style.display!=='none') e.style.display = 'none'; 
 
    else e.style.display = 'block'; 
 
}

<div id="foota123"> 
 
Content 
 
<div onclick="showhide('foota123')" class="iks">click me</div> 
 
</div>

來源

2015-02-09 00:28:03 DelightedD0D

默認情況下style屬性爲空;例如：

var e = document.createElement('div'); 
e.style.display; // ""

簡單地顛倒的工作，應該解決這個問題：

function showhide(id) { 
    var e = document.getElementById(id); 
    e.style.display = e.style.display == 'none' ? 'block' : 'none'; 
}

來源

2015-02-09 00:33:01

這對我的作品。 HTML代碼

<div id="foota123"> 
     Content 
    </div> 
    <div onclick="showhide('foota123')" class="iks">X</div>

腳本

<script type="text/javascript"> 
    function showhide(id) { 
var e = document.getElementById(id); 

if(e.style.display == 'block'){ 
    e.style.display = 'none'; 
} 
else{ 
    e.style.display = 'block'; 
    } 
} 
</script>

或樣式= 「塊」也是一個更好的選擇。

來源

2015-02-09 00:37:14 Akilsree1

第二次點擊關閉DIV，爲什麼？

回答

相關問題