我试图隐藏和显示我的页脚导航栏，但我想更改人字形图标，当导航栏被隐藏时，人字形向上显示，当导航栏显示人字形向下显示时，我尝试删除类 .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>最佳答案
尝试:
$(document).on('click', '#myButton', function(e){
//jour code
});
代替:
$('myButton').click(...)
关于javascript - Jquery 2点击功能没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30142671/