下拉菜單使用JavaScript，HTML和CSS

-1

我似乎無法得到這個工作。我不想把jQuery放入。只是做簡單的JavaScript。當我點擊圖片時，什麼也沒有發生。我需要它點擊圖片時下拉導航。編輯我的Javascript代碼。我添加了警報以顯示切換正在使用的類的當前狀態。但我仍不能得到它從header_navigation_mobile改爲header_navigation_mobile.is_open下拉菜單使用JavaScript，HTML和CSS

這是我可點擊圖片

<a href="#" onclick="toggleMenu()"> 
    <img class="mobile_navigation_button" src="{{site.baseurl}}/assets/img/menu.svg"/> 
</a>

HTML代碼這是下拉導航的HTML

<div class="header_navigation_mobile"> 
    <ul> 
     <li><a href="{{site.baseurl}}/index.html">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">CONTACT</a></li> 
     <li><a href="#"> </a></li> 
     <li><a href="#"> </a></li> 
    </ul> 
</div>

然後我的CSS可點擊圖片顯示導航

.header_navigation_mobile.is_open{ 
    display: block; 
    transform: translateY(0%); 
}

這是這是它隱藏

.header_navigation_mobile{ 
    display: none; 
    position: absolute; 
    width: 290px; 
    background: #484547; 
    transform: translateY(-100%); 
    transition: all 0.3s ease-in-out; 
}

於是最後我的JavaScript

function toggleMenu(){ 
var mobileNav = document.getElementById('mobile_Nav'); 
var mobileNav_toggle = mobileNav.getAttribute("class"); 

if(mobileNav_toggle == "header_navigation_mobile") { 
    mobileNav_toggle == "header_navigation_mobile.is_open"; 
} 
else { 
    mobileNav_toggle == "header_navigation_mobile"; 
} 

alert(mobileNav_toggle); 
}

來源

2017-01-27 juscuizon

*「尋求調試幫助的問題（」爲什麼不是這個代碼工作？「）必須包含所需的行爲」*，我們不知道你想在這裏做什麼。怎麼回事，有沒有錯誤？如果我們不知道你想要什麼，我們不能回答。 –

歡迎！請提供[mcve]。具體是：會發生什麼？你期望會發生什麼？ –

在你的JS嘗試像this.use querySelector選擇elements.And設置可點擊圖片第一狀態的CSS並獲得CSS屬性使用selector.style.property_name。

function toggleMenu(){ 
    var mobileNav_Hide = document.querySelector('.header_navigation_mobile'); 
    var mobileNav_Show = document.querySelector('.header_navigation_mobile.is_open') 
    if(mobileNav_Hide.style.display == "none"){ 
     mobileNav_Show.stylr.display == "block"; 
    } 
    else{ 
     mobileNav.style.display = "none"; 
    } 
}

來源

2017-01-27 01:18:12

我會給菜單中的ID，以便更容易的目標，那麼只需撥動您使用隱藏/顯示菜單中的類。

.header_navigation_mobile { 
 
    display: none; 
 
} 
 
.open { 
 
    display: block; 
 
}

<a href="#" onclick="toggleMenu()">toggle</a> 
 

 
<div class="header_navigation_mobile" id="mobilenav"> 
 
    <ul> 
 
    <li><a href="{{site.baseurl}}/index.html">HOME</a></li> 
 
    <li><a href="#">ABOUT</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    <li> 
 
     <a href="#"> </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script> 
 
    function toggleMenu(){ 
 
    var nav = document.getElementById('mobilenav'); 
 
    nav.classList.toggle('open'); 
 
    } 
 
</script>

來源

2017-01-27 01:18:17

我知道這是不是一個具體的回答你的問題，但可能是一個方便的解決方案，以及。我把一個隱藏菜單的jsfiddle放在一起，你可以很容易地編輯你的需求。鏈接在這裏。

#Btn{ 
 
\t position: fixed; 
 
\t right: 20px; 
 
\t width: 20px; 
 
\t height: 24px; 
 
\t background: linear-gradient(#FFF,#DDD); 
 
\t border: #AAA 1px solid; 
 
\t border-radius: 2px; 
 
\t padding: 2px 5px; 
 
\t cursor: pointer; 
 
\t transition: border 0.3s linear 0s; 
 
} 
 
#Btn:hover{ 
 
\t border: #06F 1px solid; 
 
} 
 
#Btn:hover div{ 
 
\t background: #06F; 
 
} 
 
#Btn > div{ 
 
\t width: 20px; 
 
\t height: 4px; 
 
\t background: #333; 
 
\t margin: 3px 0px; 
 
\t border-radius: 4px; 
 
\t transition: background 0.3s linear 0s; 
 
} 
 
#hidden{ 
 
\t position: fixed; 
 
\t right: -300px; 
 
\t top: 60px; 
 
\t width: 260px; 
 
\t height: 0px; 
 
\t background: #333; 
 
\t color:#ededed; 
 
\t padding:15px; 
 
\t transition: right 0.3s linear 0s; 
 
}

<script> 
 
function toggleBTN(){ 
 
\t var hidden = document.getElementById("hidden"); 
 
\t hidden.style.height = window.innerHeight - 60+"px"; 
 
\t if(hidden.style.right == "0px"){ 
 
\t \t hidden.style.right = "-300px"; 
 
\t } else { 
 
\t \t hidden.style.right = "0px"; 
 
\t } 
 
} 
 
</script> 
 
<div id="Btn" onclick="toggleBTN()"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div id="hidden"> 
 
    <ul> 
 
    <li>MENU ITEM 1</li> 
 
\t <li>MENU ITEM 2</li> 
 
\t <li>MENU ITEM 3</li> 
 
    </ul> 
 
</div> 
 
<div id="page_content"> 
 
<script> 
 
for(var i = 0; i < 10; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); } 
 
</script> 
 
</div>

希望這有助於:)

來源

2017-01-27 01:31:23 DigitalDesigner

有else語句的幾件事情是哪裏來mobileNav從沒有在你的代碼任何地方的實例。從您的解決方案退後一分鐘，添加和刪除類名is_open會定義您所需的整個show hide行爲？

你的獲取與目前/不存在的子類相同的元素，然後試圖設置顯示屬性的過程是混淆。

當設置顯示屬性時，你有一個相等比較器，它應該只是一個單一的等於它與我的第一個聲明，我認爲是你的主要問題。

，而不是你在做它，我只想看看撥動IS_OPEN類此鏈接Toggle class on HTML element without jQuery展示瞭如何做到這一點，也順便證明的切換樣式的一些其他方法包括但JavaScript的

最後只需要檢查，因爲即時通訊懶惰，顯示是有效的屬性，它不應該是風格。像其他人指示的那樣顯示

來源

2017-01-27 01:39:48

下拉菜單使用JavaScript，HTML和CSS

回答

相關問題