Wie man das mobile Menüfeld schließt, wenn ich auf mein benutzerdefiniertes div klicke

Question

Ich möchte beide Funktionen verbinden, aber ich habe immer noch kein korrektes Ergebnis nach vielen Tests.

Hier ist der Beispielcode ich =>

function myFunction(x) { 
x.classList.toggle("change"); 
} 
$(document).ready(function() 
{ 
var isMenuOpen = false; 

$('.menu_btn').click(function() 
{ 
    if (isMenuOpen == false) 
    { 
     $("#menu_smartphone").clearQueue().animate({ 
      left : '0px' 
     })    
    $("#grey_back").fadeIn('fast'); 
     $(".close").fadeIn(300); 

     isMenuOpen = true; 
    } 
});  
$('#grey_back').click(function() 
{ 
    if (isMenuOpen == true) 
    { 
     $("#menu_smartphone").clearQueue().animate({ 
      left : '-200px' 
     }) 
     $("#page").clearQueue().animate({ 
      "margin-left" : '0px' 
     })    
    $("#grey_back").fadeOut('fast'); 
     $(this).fadeOut(200); 

     isMenuOpen = false; 
    } 
}); 
}); 

Also, was ich will, ist, wenn sie in .menu_btn der Seitenwand Anklicken öffnen (die fonction ist in Ordnung), aber wenn reclicking darauf (wenn isMenuOpen = true), schließen Sie die Seitenwand. Mit diesem Code, in der Nähe der Seitenwand nur dann, wenn in den #grey_back klicken

Hier eine Demo ist => https://jsfiddle.net/vsfogccy/

Answer 1

Ich würde Ihnen vorschlagen, Ihren Code und optimieren die Animationen zu vereinfachen. transform: translate() funktioniert viel glatter dann animierende statische Position, wie in Ihrem Fall - left Eigentum.

var isGreyInvisible = true; 
 
$('.menumobile').click(function() { 
 
    if (isGreyInvisible) { 
 
    $('#grey_back').fadeIn(); 
 
    isGreyInvisible = false; 
 
    } else { 
 
    $('#grey_back').fadeOut(); 
 
    isGreyInvisible = true; 
 
    } 
 
    $('#menu_smartphone').toggleClass('open'); 
 
    $('.bar1').toggleClass('change1'); 
 
    $('.bar2').toggleClass('change2'); 
 
    $('.bar3').toggleClass('change3'); 
 
}); 
 

 
$('#grey_back').click(function() { 
 
    $('#menu_smartphone').removeClass('open'); 
 
    $('#grey_back').fadeOut(); 
 
    isGreyInvisible = true; 
 
    $('.bar1').removeClass('change1'); 
 
    $('.bar2').removeClass('change2'); 
 
    $('.bar3').removeClass('change3'); 
 
});

/* Menu mobile */ 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 
#menu_smartphone { 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    transform: translateX(-250px); 
 
    bottom: 0; 
 
    padding-top: 30px; 
 
    width: 250px; 
 
    transition: all 1s ease; 
 
    color: webkit-box-shadow: inset 0px 7px 5px -5px rgba(0, 0, 0, 0.5); 
 
    -moz-box-shadow: inset 0px 7px 5px -5px rgba(0, 0, 0, 0.5); 
 
    box-shadow: inset 0px 7px 5px -5px rgba(0, 0, 0, 0.5); 
 
    background: rgb(230, 230, 230); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#ffffff', GradientType=0); 
 
    background: -moz-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 230, 1)), color-stop(25%, rgba(249, 249, 249, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: -o-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: -ms-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
    background: linear-gradient(to bottom, rgba(230, 230, 230, 1) 0%, rgba(249, 249, 249, 1) 25%); 
 
} 
 
#menu_smartphone ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    color: #999999; 
 
} 
 
#menu_smartphone ul li { 
 
    height: 70px; 
 
    padding-left: 10px; 
 
    line-height: 70px; 
 
} 
 
#menu_smartphone ul li:hover { 
 
    background: #f7f7f7; 
 
} 
 
#menu_smartphone ul li a { 
 
    color: #999999; 
 
    text-decoration: none; 
 
    font-family: 'Roboto'; 
 
    font-weight: 400; 
 
    font-size: 25px; 
 
} 
 
#grey_back { 
 
    display: none; 
 
    background-color: #000000; 
 
    opacity: 0.7; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #ffffff; 
 
    margin: 10px; 
 
    padding: 20px; 
 
    color: #666666; 
 
    font-weight: 300; 
 
    font-size: 36px; 
 
    text-align: center; 
 
    font-family: 'Roboto'; 
 
} 
 
/* Menu animé en css */ 
 

 
.menumobile { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    position: fixed; 
 
    z-index: 100000; 
 
    top: 10px; 
 
    left: 10px; 
 
    z-index: 100000; 
 
} 
 
.bar1, 
 
.bar2, 
 
.bar3 { 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: #333; 
 
    margin: 6px 0; 
 
    transition: 0.4s; 
 
} 
 
/* Rotate first bar */ 
 

 
.change1 { 
 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
 
    transform: rotate(-45deg) translate(-9px, 6px); 
 
} 
 
/* Fade out the second bar */ 
 

 
.change2 { 
 
    opacity: 0; 
 
} 
 
/* Rotate last bar */ 
 

 
.change3 { 
 
    -webkit-transform: rotate(45deg) translate(-8px, -8px); 
 
    transform: rotate(45deg) translate(-8px, -8px); 
 
} 
 
.open { 
 
    transform: translateX(0) !important; 
 
    transition: all 1s ease; 
 
} 
 
.visible { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menumobile menu_btn"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
    <div class="bar3"></div> 
 
</div> 
 
<div id="grey_back">&nbsp;</div> 
 
<div id="menu_smartphone" class="menu_mobile_app closed" align="left"> 
 
    <ul style="overflow-y:auto;"> 
 
    <li><a href="#">MENU 1</a> 
 
    </li> 
 
    <li><a href="#">MENU 2</a> 
 
    </li> 
 
    <li><a href="#">MENU 3</a> 
 
    </li> 
 
    <li><a href="#">MENU 4</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="card"></div>