Функция запускается только один раз

Question

Я сделал эту маленькую функцию jQuery, чтобы сделать мою навигацию слайдом на мобильных устройствах. Моя единственная проблема, хотя ... Я могу только показать и скрыть это однажды ... Может ли кто-нибудь помочь мне с этим? Заранее спасибо!

$('#menu-btn').click(function(){ 

    if ($('nav ul').css('margin') == '83px 0px 0px -225px') { 

    $('nav ul').animate({ 
     margin:'83px 0px 0px 0px' 
    }, 200); 

    } 
    else { 

    $('nav ul').animate({ 
     margin:'83px 0px 0px -255px' 
    }, 200); 

    } 

}); 

Answer 1

Как альтернативное решение вы можете следовать этому пути:

Вы можете переключать класс с полями на каждой мыши вместо строки сравнить

$('#menu-btn').click(function() { 
    $('nav ul').toggleClass('slided')  
}) 

Кроме того, необходимо 2 правила CSS

nav ul { 
    margin: 83px 0px 0px 0px 
} 

nav ul.slided { 
    margin: 83px 0px 0px -225px 
} 

Answer 2

var flag=true; 
 
$(function(){ 
 
    $('#menu-btn').click(function(){  
 
     var newMargin = flag===true ? '83px 0px 0px -225px' : '83px 0px 0px 0px'; 
 
     $('nav ul').animate({ 
 
      margin: newMargin // toggle margin according to flag 
 
     }, 200); 
 
     flag = !flag;//toggle flag 
 
    }); 
 
});

nav ul { 
 
    margin: 83px 0px 0px 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
     <li>List 1</li> 
 
     <li>List 2</li> 
 
     <li>List 3</li> 
 
     <li>List 4</li> 
 
     <li>List 5</li> 
 
    </ul> 
 
</nav> 
 
<br/> 
 
<button id="menu-btn">Click</button>

Попробуйте это,

var flag=true; 

$(function() { 
    $('#menu-btn').click(function() {  
     var newMargin = flag==true ? '83px 0px 0px -225px' : '83px 0px 0px 0px'; 

     $('nav ul').animate({ 
      margin: newMargin //toggle margin according to flag 
     }, 200); 

     flag = !flag; //toggle flag 
    }); 
}); 

Answer 3

Или вы можете попробовать это -

$('#menu-btn').click(function(){ 
    if ($('nav ul').css('margin-left') == '225px') { 
     $('nav ul').animate({ 
      margin:'83px 0px 0px 0px' 
     }, 200); 
    } else { 
     $('nav ul').animate({ 
      margin:'83px 0px 0px 225px' 
     }, 200); 
    } 
}); 

Проблема с кодом, что вы пытались получить сокращенную собственность края, которая в соответствии с документацией jQuery, не гарантируется работа -

Извлечение сокращенного CSS-пропе rties (например, margin, background, border), хотя и работает с некоторыми браузерами, не гарантируется.