jQuery 2单击功能无法按预期工作
[英]Jquery 2 click Function not working as expected
问题描述
I am trying to hide and show my footer navbar but i wanted to change the chevron icon , when the navbar is hidden chevron up to be displayed and when navbar shown chevron down show therefore i tried removing a class .bottom-action and add one class .bottom-action2 and when the 2nd one is clicked inverse all settings but it is not working as expected. 
我试图隐藏并显示页脚导航栏，但是我想更改人字形图标，当导航栏隐藏时人字形向上显示，当导航栏显示人字形向下显示时，因此我尝试删除类.bottom-action并添加一个类.bottom-action2并单击第二个按钮时，将所有设置反向，但无法正常工作。
$(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>
2 个解决方案
解决方案1
3 已采纳 2015-05-09 17:03:33
Try : 尝试：
$(document).on('click', '#myButton', function(e){
//jour code
});
Instead of : 代替 ：
$('myButton').click(...)
解决方案2
2 2015-05-09 17:04:28
The problem is that at the time of binding the event there is no bottom-action2 element in your DOM. 问题在于，绑定事件时，DOM中没有bottom-action2元素。 Funnily enough, this would work: 有趣的是，这将起作用：
$(".bottom-action").click(function(){
if($(this).hasClass("bottom-action")){
// do one thing
}
else if if($(this).hasClass("bottom-action2")){
// do the other thing
}
}
But as @Béranger pointed out, using a handler on a higher level would be the cleaner solution. 但是正如@Béranger指出的那样，在更高级别上使用处理程序将是更清洁的解决方案。 In your case something like 在你的情况下
$(document).on('click', '.bottom-action', function(e){
// do one thing
});
$(document).on('click', '.bottom-action2', function(e){
// do the other thing
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.