jQuery скрипт выпадалки

xEoN 30.07.2013 jquery Все вопросы » jQuery 3386

вопрос

Добрый день всем.
Нужна ваша помощь. Есть 2 события:

$('.dropDown_menu li#translate').click(function(){ // Клик на вкладку c опр. ID
            $('.input_search_inner').animate({paddingRight:"+=285px"});  // Уменьшаем поле поиска, сделав нужный отступ с права
            setTimeout(function(){
                $('#bl_translate').fadeIn();
            }, 250); // В анимации показываем скрытые пункты
            return false;
        });
        $('.dropDown_menu li:not(#translate)').click(function(){
            $('#bl_translate').hide();
            $('.input_search_inner').animate({paddingRight:"140px"})
        });

Все вроде бы хорошо, но если нажать повторно на (.dropDown_menu li#translate) то он еще делает отступ, чего не нужно. Т.е нажал 1 раз на кнопку с ид (.dropDown_menu li#translate) он сделал свое дело (при нажатие также вешается класс active), при повторном нажатие чтобы ничего не было.

Буду благодарен за любую помощь.

Ответа пока нет

5 комментариев

Юзер

324

TheImDim - 2015-04-1530 июля 2013 19:54 - #15227


$('.dropDown_menu li#translate').click(function(){ 
            var _this = $(this);
            if( _this.hasClass("active") ) return false;
            _this.addClass("active");
            $('.input_search_inner').animate({paddingRight:"+=285px"});  // Уменьшаем поле поиска, сделав нужный отступ с права
            setTimeout(function(){
                $('#bl_translate').fadeIn();
            }, 250); // В анимации показываем скрытые пункты
            return false;
        });
        $('.dropDown_menu li:not(#translate)').click(function(){
            $('#bl_translate').hide();
            $('.input_search_inner').animate({paddingRight:"140px"})
        });

Юзер

xEoN - 2015-04-1531 июля 2013 01:29 - #15245

Ээм не то совсем.
Вот полный скрипт который есть:

$(document).ready(function(){
    (function($){
        $('.dropDown_menu li').click(function(){
            var dropDown_wp = $('.dropDown_menu ul').find('li');
            dropDown_wp.siblings("li.active").removeClass('active');
            $(this).addClass('active');
        });
        $('.dropDown_menu li#translate').click(function(){ // Клик на вкладку c опр. ID
            $('.input_search_inner').animate({paddingRight:"+=285px"});  // Уменьшаем поле поиска, сделав нужный отступ с права
            setTimeout(function(){
                $('#bl_translate').fadeIn();
            }, 300); // В анимации показываем скрытые пункты
            return false;
        });
        $('.dropDown_menu li:not(#translate)').click(function(){
            $('#bl_translate').hide();
            $('.input_search_inner').animate({paddingRight:"140px"})
        });
        
    })(jQuery)
});

А вот сайт с примером, если нажать на вкладку переводы 2-жды то зрелище не из приятных...
http://create-project.ru/proj/test1/

Юзер

324

TheImDim - 2015-04-1531 июля 2013 01:44 - #15246

Я хоть и не так давно знаком с js, но хочеться материться когда видишь такие скрипты, вот нормальный, оптимизированный вариант:


$(document).ready(function(){
    $(function() {
        $('.dropDown_menu li').live("click", function(){
            var _this = $(this);
            if( _this.hasClass("active") ) return false;
            var id = _this.attr("id");
            $('.dropDown_menu li.active').removeClass('active');
            _this.addClass('active');
            
          if( id == "translate" ) {
            $('.input_search_inner').animate({paddingRight:"+=285px"});  // Уменьшаем поле поиска, сделав нужный отступ с права
            setTimeout(function(){ $('#bl_translate').fadeIn(); }, 300); // В анимации показываем скрытые пункты
            return false;
          } else {
            $('#bl_translate').hide();
            $('.input_search_inner').animate({paddingRight:"140px"})
          }
        });
        
    });
});