Пытается открыть/закрыть div с одной кнопкой

Question

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».

Я новичок в Javascript, поэтому, пожалуйста, пройдите ко мне. Я посмотрел вверх, но не мог понять их.

Answer 1

Вам просто нужно одну функцию с 2 условными (если и остальные);

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>

Answer 2

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> 

Answer 3

Вы можете проверить 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>

Answer 4

Просто проверьте ширину первого элемента. если элемент имеет ширину 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"; 
} 

Answer 5

Вы также можете достичь этого, используя 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>