的JavaScript的onclick需要兩次點擊

我的問題是，當onclick觸發它不執行toggleNew功能，但是當我點擊div它的執行只是因爲它應該進行第二次......的JavaScript的onclick需要兩次點擊

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時能夠正常工作？

來源

2014-02-18 Abbe

是div的設置爲'顯示：block'默認或已經將它們改爲'顯示：直列block'或其他什麼東西？ –

'aside_main'是'display：block'，'aside_new'是'display：none'。 – Abbe

這將無法正常工作，因爲您正在使用隱藏的'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它不檢查中如果條件「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'; 
    }

來源

2014-02-18 12:17:11

但是，當我點擊它並沒有隱藏，它是第二次工作... – Abbe

您的JavaScript檢查即如果（e.style.display =='塊'）第一次不工作.. –

你的JS作品:-)（但它很醜：P） – Abbe

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

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

來源

2014-02-18 11:54:42 Musa

對不起，只是我寫的例子錯了... – Abbe

@Abbe請參閱更新 – Musa

我確實使用CSS來設計它們，請參閱編輯。 – Abbe

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

來源

2014-02-18 11:55:19 Vinoth

對不起，只是我寫了一個錯誤的例子... – Abbe

我更新了小提琴，該功能是第一次執行時，我點擊div。 http://jsfiddle.net/vinbtechdf/dejW3/1/ – Vinoth

當您添加CSS時，它不再執行第一次（即編輯）。 – Abbe

在您的條件：使用onclick="toggleNew();" //調用

這是通向通話功能。

如果你想通的功能，那麼你只能使用toggleNew //傳遞

這是兩個不同的活動。

來源

2014-02-18 12:00:00

它的工作第二次我點擊... – Abbe

這裏是這樣做的另一種方式。你只需要添加兩行到你的javascript代碼 -

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

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

來源

2014-02-18 12:40:10

可能不是最好的答案，但解決方法是使用樣式屬性內聯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>

來源

2014-02-18 12:59:27

的JavaScript的onclick需要兩次點擊

回答

相關問題