Создание переключателя при нажатии

Question

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

Мой текущий JQuery является:

$('.bet-slip-outer').click(function() { 
    // Responsive Stuff... 
    var windowwidth = $(window).width(); 

    $('.bet-slip').animate({ 
     'right': '-240px' 
    }); 
}, function() { 
    $('.bet-slip').animate({ 
     'right': '0px' 
    }); 
}); 

Однако, когда я нажимаю .bet-slipright:-240 просто кажется, имеют преимущество.

Что я делаю неправильно?

Приветствия

Answer 1

Используйте переменную, чтобы проверить, был ли элемент еще нажат.

toggle = "on"; 
$('.bet-slip-outer').click(function() { 
    // Responsive Stuff... 
    var windowwidth = $(window).width(); 
    if(toggle == "on"){ 
     $('.bet-slip').animate({ 
      'right': '0px' 
     }); 
     toggle = "off"; 
    }else{ 
     $('.bet-slip').animate({ 
      'right': '-240px' 
     }); 
    } 
}); 

Answer 2

с условным:

определить правильный стиль.

<div class="bet-slip" style="right:0px;"></div> 

JQuery

$('button').click(function() { 
    if($('.bet-slip').css('right') === '0px'){ 
     $('.bet-slip').animate({'right':'-240px'}); 
    } else { 
     $('.bet-slip').animate({'right':'0px'}); 
    } 
}); 

другие

только стиль:

$('button').click(function(){ 
 
    $('div').toggleClass('right'); 
 
});

div{ 
 
\t position:relative; 
 
\t width:100px; 
 
\t height:10px; 
 
\t background:green; 
 
\t right:-100px; 
 
\t transition:1s; 
 
} 
 
.right{ 
 
\t right:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    
 
</div> 
 
<button> 
 
    f 
 
</button>

Answer 3

Согласно официальной документации, то .click() method принимает только один обработчик. Вы не можете объявить для этой цели два разных обработчика. Есть два решения, которые - один должны делегировать анимацию CSS и использовать .toggleClass() вместо этого, или использовать динамический код:

• магазина статус переключения элемента в своем собственных данных JQuery объект
• Читать объект данных. Если он не существует или 0, сделать что-то (условие 1)
• Если он существует и 1, сделать что-то еще (условие 2)

Вы, конечно, можете изменить двоичные условия 1 и 2 в эффект, который вы хотите достичь.

Кроме того, чтобы предотвратить резкую анимацию из-за быстрого нажатия/переключения, вы должны остановить анимацию, прежде чем вы будете больше анимации в очереди. Это делается путем привязки .stop(true, true) к объекту.

$(function() { 
 
    $('.bet-slip-outer').click(function() { 
 
    // Check state 
 
    if(!$(this).data('toggle') || $(this).data('toggle') == 0) { 
 
     $(this).data('toggle', 1); 
 
     $('.bet-slip').stop(true, true).animate({ 
 
     'right': '-240px' 
 
     }); 
 
    } else { 
 
     $(this).data('toggle', 0); 
 
     $('.bet-slip').stop(true, true).animate({ 
 
     'right': '0' 
 
     }); 
 
    } 
 
    }); 
 
});

.bet-slip { 
 
    position: relative; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bet-slip-outer"> 
 
    <div class="bet-slip">bet-slip</div> 
 
</div>

Answer 4

СОВСЕМ Хардинг-КОДИРОВАНИЕ СТИЛЬ ПЕРЕМЕННЫХ В JS!

Вы могли бы сделать что-то вроде:

$(".bet-slip-outer .bet-slip").toggleClass("animation"); 

Тогда в вашем CSS вы могли бы сделать:

.bet-slip-outer .bet-slip { right: 0px;} 
    .animation { right: -240px;} 

Почему использовать эту опцию над другими?

• Ваши переменные STYLE без жесткого кодирования в вашем java-скрипте, которые вы оставляете в CSS (для чего это сделано). Поскольку проект растет, если вы продолжаете жесткое кодирование, он в конечном итоге сделает ваш код JS «запахом». IE: Мне больно менять дорогу!