Jquery 2 click Функция не работает должным образом

Я пытаюсь скрыть и показать навигационную панель нижнего колонтитула, но я хотел изменить значок шеврона, когда навигатор скрыт шеврон до отображения, и когда navbar показан chevron down show, поэтому я попытался удалив класс .bottom-action и добавьте один класс .bottom-action2, а когда второй щелкнул, измените все настройки, но он не работает должным образом. Jquery 2 click Функция не работает должным образом

$(document).ready(function(){ 
 
    $(".bottom-action").click(function(){ 
 
     $(".bottom-navbar").slideToggle("slow"); 
 
     $(".down").css("display","none"); 
 
     $(".up").css("display","block"); 
 
     $(".bottom-action").removeClass('bottom-action').addClass("bottom-action2"); 
 
      
 
    }); 
 

 
$(".bottom-action2").click(function(){ 
 
     $(".bottom-navbar").slideToggle("slow"); 
 
     $(".up").css("display","none"); 
 
     $(".down").css("display","block"); 
 
     $(".bottom-action2").removeClass('bottom-action2').addClass("bottom-action"); 
 
      
 
    }); 
 

 

 

 
});

.bottom-navbar{ 
 
    position: fixed; 
 
width: 100%; 
 
bottom: 0px; 
 
left: 0px; 
 
background: #E4E4E4; 
 
padding-top: 3px; 
 
border-top: 1px solid #C9C9C9; 
 
z-index: 7000; 
 
} 
 

 
.bottom-navbar .item{ 
 

 
    margin-left: 22px; 
 
margin-right: 22px; 
 
display: inline-block; 
 
border-bottom: 2px solid transparent; 
 
cursor: pointer; 
 
} 
 

 
.bottom-action{position: fixed; 
 
bottom: 0px; 
 
right: 10%; 
 
background-color: #EEE; 
 
color: #000; 
 
z-index: 7002; 
 
background: transparent; 
 

 
} 
 

 
.bottom-action2{position: fixed; 
 
bottom: 0px; 
 
right: 10%; 
 
background-color: #EEE; 
 
color: #000; 
 
z-index: 7002; 
 
background: transparent; 
 

 
} 
 

 
.bottom-action .down{} 
 
.bottom-action .up{display: none;}

<head> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<div class="bottom-navbar"> 
 
    <div class='container'><div class='item'>Compare</div></div> 
 
</div> 
 

 
<div class='bottom-action'><span class='glyphicon glyphicon-chevron-down down'></span> <span class='glyphicon glyphicon-chevron-up up'></span></div>

источник

2015-05-09 Wasim Ahmad

Try:

$(document).on('click', '#myButton', function(e){ 
    //jour code 
});

Вместо:

$('myButton').click(...)

источник

2015-05-09 17:03:33

спасибо, что это сработало –

Проблема в том, что в момент связывания события нет снизу action2 элемент в вашем DOM , достаточно странно, это будет работать:

$(".bottom-action").click(function(){ 
    if($(this).hasClass("bottom-action")){ 
     // do one thing 
    } 
    else if if($(this).hasClass("bottom-action2")){ 
    // do the other thing 
    } 
}

Но, как @ Béranger указал, используя обработчик на более высоком уровне будет уборщик решение. В вашем случае что-то вроде

$(document).on('click', '.bottom-action', function(e){ 
    // do one thing 
}); 

$(document).on('click', '.bottom-action2', function(e){ 
    // do the other thing 
});

источник

2015-05-09 17:04:28 ImreNagy

Проголосовало за expiclationns –

Jquery 2 click Функция не работает должным образом

ответ

Смежные вопросы