下拉菜单使用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

回答

相关问题