切換按鈕不起作用。沒有顯示：無;首先點擊

我想用js做一個切換按鈕，但是第一次點擊它不起作用。由於nav.display.display在CSS代碼中有display: none;，因此它沒有任何值。切換按鈕不起作用。沒有顯示：無;首先點擊

我想應該有一個關於如何使用onload的問題......好像css還沒有加載。但我讀過window.onload等待所有加載。所以我不知道發生了什麼。

這是我如何加載它，在實際的代碼（即處理onload事件之外的jsfiddle）

window.onload = function() { 
    var el = document.querySelector('.nav-toggle'); 
    el.addEventListener("click", toggleNav, false); 
};

NO jQuery，請。

這裏的的jsfiddle：

function toggleNav() { 
 
    var nav = document.querySelector('#navigation'); 
 
    alert(nav.style.display); 
 
    
 
    if (nav.style.display == 'none') { 
 
    nav.style.display = 'flex'; 
 
    } else { 
 
    nav.style.display = 'none'; 
 
    } 
 
} 
 
var el = document.querySelector('.nav-toggle'); 
 
el.addEventListener("click", toggleNav, false);

#navigation { 
 
    display: none; 
 
}

<button class="nav-toggle">Toggle</button> 
 
<nav id="navigation"> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
</nav>

來源

2016-12-15 Jeflopo

附加

呀，這樣在DOM的顯示性能。它的工作原理。但是，如果我不想使用style =「」屬性？ – Jeflopo

如果你想在css中保留「display：none」，你可以添加一個檢查offsetWidth和offsetHeight，如下所示：http://stackoverflow.com/a/19808107/407526 – Adrian

您可以通過訪問getComputedStyle()風格，而不是style

var btn = document.querySelector('.nav-toggle'), 
 
    nav = document.getElementById('navigation'); 
 
    
 
btn.addEventListener('click', function (e) { 
 
    e.preventDefault() 
 
    if (window.getComputedStyle(nav, null).display == 'none') { 
 
    nav.style.display = 'flex'; 
 
    } else { 
 
    nav.style.display = 'none'; 
 
    } 
 
});

#navigation { 
 
    display: none; 
 
}

<button class="nav-toggle">Toggle</button> 
 
<nav id="navigation"> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
</nav>

來源

2016-12-15 07:14:26

對你而言，我認爲最好使用'getComputedStyle（）'而不是依賴元素大小。也謝謝你。 – Jeflopo

不客氣，謝謝你的客氣話。 – 2016-12-16 05:48:01

添加DISPLY：沒有你的#navigation希望這一個工程。

function toggleNav() { 
 
    var nav = document.getElementById('navigation'); 
 
    
 
    
 
    if (nav.style.display == 'none') { 
 
    nav.style.display = 'block'; 
 
    
 
    } else { 
 
    nav.style.display = 'none'; 
 
    } 
 
} 
 
var el = document.querySelector('.nav-toggle'); 
 
el.addEventListener("click", toggleNav, false);

#navigation { 
 
    display: none; 
 
}

<button class="nav-toggle">Toggle</button> 
 
<nav id="navigation"> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
</nav>

來源

2016-12-15 06:16:54

它的工作原理。但我寧願不使用style =「」屬性。 – Jeflopo

當前的答案無效。第一次點擊顯示沒有價值。所以我們必須點擊兩次才能顯示。 – Jeflopo

**第一次**點擊後不能正常工作**兩次**點擊。 –

感謝@Aliester發表評論我想通了:)

function toggleNav() { 
 
    var nav = document.getElementById('navigation'); 
 
    
 
    if (nav.offsetWidth == 0 && nav.offsetHeight == 0) { 
 
    nav.style.display = 'flex'; 
 
    } else { 
 
    nav.style.display = 'none'; 
 
    } 
 
} 
 
var el = document.querySelector('.nav-toggle'); 
 
el.addEventListener("click", toggleNav, false);

#navigation { 
 
    display: none; 
 
}

<button class="nav-toggle">Toggle</button> 
 
<nav id="navigation"> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
</nav>

來源

2016-12-15 06:28:57 Jeflopo

切換按鈕不起作用。沒有顯示：無;首先點擊

回答

相關問題