试图用一个按钮打开/关闭div

function openNav() { 
    document.getElementById("mySidenav").style.width = "200px"; 
} 

/* Set the width of the side navigation to 0 */ 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
} 

<div onclick="openNav()" class="minimenubutton"><img src="images/menu.png"/></div>

我正在寻找一种方法，每次单击该按钮时都会更改该功能，以便可以用一个按钮打开我的div。截至目前，我已将closeNav设置为该div内的按钮，但我希望只用“minimenubutton”来完成。试图用一个按钮打开/关闭div

我是新来的Javascript，所以请容易对我。我抬头看，但无法弄清楚。

来源

2016-05-16 James Bray

你能包括问题'＃mySidenav'元素？ – guest271314

你只需要2个条件语句一个功能（if和else）;

function togNav() { 
 
    var nav = document.getElementById("nav"); 
 
    if (nav.style.width == '200px') { 
 
    nav.style.width = '0'; 
 
    nav.style.opacity = 0; 
 
    } else { 
 
    nav.style.width = "200px"; 
 
    nav.style.opacity = 1; 
 
    } 
 
}

#nav { 
 
    transition: opactity 3s ease-in; 
 
    opacity: 0; 
 
    cursor: pointer; 
 
}

<p>Click under this paragraph</p> 
 
<nav id="nav" onclick="togNav()" class="minimenubutton"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" /> 
 
</nav>

来源

2016-05-16 01:20:21 zer00ne

这工作完美。感谢您的帮助和知识！ –

先生，您非常欢迎。 – zer00ne

将CSS与JS分开的一种方法是使切换代码只添加/删除CSS类并在这些类中定义样式规则。 –

function toggleNav() { 
    var el = document.getElementById("mySidenav"); 
    if(el.style.width == "200px"){ 
     el.style.width = "0px"; 
    } else { 
     el.style.width = "200px"; 
    } 
} 

<div onclick="toggleNav()" class="minimenubutton"><img src="images/menu.png"/></div>

来源

2016-05-16 01:13:12 noahnu

您可以检查csswidth使用getComputedStyle()元素，拨动0px，200px;设置overflow到hidden在#mySidenavcss

#mySidenav { 
 
    display: inline-block; 
 
    width: 0px; 
 
    position: relative; 
 
    overflow: hidden; 
 
}

<script> 
 
    function toggleNav() { 
 
    var el = document.getElementById("mySidenav"); 
 
    el.style.width = window.getComputedStyle(el).width === "0px" ? "200px" : "0px"; 
 
    } 
 
</script> 
 
<div id="mySidenav">side nav</div> 
 
<div onclick="toggleNav()" class="minimenubutton"> 
 
    <img src="http://lorempixel.com/50/50/nature" /> 
 
</div>

来源

2016-05-16 01:16:10 guest271314

你能分解一下“el.style.width = window.getComputedStyle（el）.width ===”0px“？”200px“：”0px“;”为我做？我知道我不是那个发布这个问题的人，但我一直在追寻它寻找一个不是jQuery的答案。我试图更好地理解jQuery后面的JavaScript。如果你有时间会很棒。谢谢！ –

@JamesHamann OP在问题中未提供'＃mySidenav'的'html'。如果'＃mySidenav'' width'设置为'css'，而不是'style'属性，那么检查'element.style.width === 200px'或'0px'将不会返回预期的结果。 '.getComputedStyle（）'将返回'.css'文件中的样式。真的吗？ // do stuff：// else do other stuff' is ternary operator – guest271314

很酷，很高兴知道。因此，该行的最后一部分“===”0px“？”200px“：”0px“;”，是否会切换宽度？我只是不知道如何。问号和冒号符号是做什么的？对不起，很多问题 –

-1

第一只需检查元件的宽度。如果该元素的宽度为200px，则将其设置为0px，但如果该元素不是200px，则该值必须为0px;所以将宽度设置为200px。

function togNav() { 
    var e = document.getElementById("mySidenav"); 
    if (e.style.width == "200px") ? e.style.width = "0px" : e.style.width = "200px"; 
}

来源

2016-05-16 01:25:39 user3278983

糟糕的解决方案 - 太耦合了。如果需要的高度会发生变化？我相信Javascript应该规定逻辑，而不是演示文稿。演示文稿是为CSS。 –

如果布局允许，您也可以使用checkbox + div来实现此目的。根本没有Javascript。

input.toggler { display: none; } 
 
input.toggler + label + div { display: none; } 
 
input.toggler:checked + label + div { display: block; }

<input type=checkbox id=sometoggler class=toggler /> 
 
<label for=sometoggler>open/close</label> 
 
<div>content to show/hide </div>

来源

2016-05-16 03:25:45

试图用一个按钮打开/关闭div

回答

相关问题