[英]show and hide menu with jquery
我想单击动画时将菜单图标更改为X形状,而单击X形状时将其更改为菜单图标。
我写这部分。点击功能有问题。 首先,当我单击菜单按钮时,它会变成X形状并显示菜单,但是当我想关闭菜单时,我的js代码无法正常工作,我也不知道为什么会这样。 我在代码中使用了引导程序,在这里上传了网站
HTML
<div class="col-xs-6">
<a class="bazar" href="">دانلود اپلیکیشن </a>
<button type="button" style="z-index:401" class="navbar-toggle try-op" >
<span style="z-index:401" class="icon-bar top-m"></span>
<span style="z-index:401" class="icon-bar mid-m"></span>
<span style="z-index:401" class="icon-bar bottom-m"></span>
</button>
<div class="menu"> <!-- <span class="btnClose">×</span> -->
<ul>
<li><a href="index.html">صفحه اصلی</a></li>
<li><a href="question.html">سوالات متداول</a></li>
<li><a href="job.html">فرصت های شغلی</a></li>
<li><a href="aboutus.html">درباره ما</a></li>
</ul>
</div>
</div>
JS
$('.try-op').click(function() {
$('.navbar-toggle').removeClass('try-op');
$('.navbar-toggle').addClass('texting');
$('.top-m').addClass('top-animate');
$('.mid-m').addClass('mid-animate');
$('.bottom-m').addClass('bottom-animate');
$('.menu').addClass('opened');
var height = $( window ).height();
$('.menu').css('height',height);
});
$('.texting').click(function() {
$('.navbar-toggle').removeClass('texting');
$('.menu').removeClass('opened');
$('.top-m').removeClass('top-animate');
$('.mid-m').removeClass('mid-animate');
$('.bottom-m').removeClass('bottom-animate');
$('.navbar-toggle').addClass('try-op');
});
CSS
.icon-bar{
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
}
.top-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(43deg);
transform: rotate(43deg);
transform-origin: 7% 100%;
-webkit-transform-origin: 7% 100%;
}
.mid-animate {
opacity: 0;
}
.bottom-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(-221deg);
transform: rotate(-221deg);
transform-origin: 45% 18%;
-webkit-transform-origin: 45% 18%;
margin-top: 0px !important;
}
.bazar-green, .bazar {
color: #fff;
display: block;
font-size: 20px;
position: absolute;
right: 80px;
top: 5px;
line-height: 43px;
background: url(image/bazarlogo.png) no-repeat left center;
padding-left: 80px;
z-index: 401;
}
.navbar-toggle {
display: block;
position: absolute;
right: 0px;
top: 0px;
}
.navbar-toggle{
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.menu {
width: 300px;
position: absolute;
z-index: 400;
background: rgba(0,0,0,0.7);
padding: 10px 30px;
text-align: right;
color: #fff;
font-size: 17px;
transition: all 1s;
right: -316px;
}
.btnClose {
color: #fff;
font-size: 30px;
cursor: pointer;
z-index: 500;
}
您实际上是将2个点击处理程序添加到同一元素。 当单击span
元素时,将执行第二个处理程序,并且随着click
事件的传播,将执行第一个click
处理程序。
您应该更改逻辑。 除了使用addClass
/ removeClass
和具有2个处理程序之外,您还可以仅使用1单击处理程序并使用toggleClass
方法切换classNames。
$('.try-op').click(function() {
var isOpened = $('.menu').toggleClass('opened').hasClass('opened');
if ( isOpened ) {
// the menu is opened
} else {
// ...
}
});
您拥有的另一种选择是使用事件委托技术。 我看到您正在第一个处理程序中删除className,可能是为了取消绑定处理程序以进行下一次单击处理,但是事件处理程序是绑定到元素的,而不是绑定到其classNames上。
$(document).on('click', '.navbar-toggle.open', function() {
$(this).removeClass('open').addClass('close');
// ...
});
$(document).on('click', '.navbar-toggle.close', function() {
$(this).removeClass('close').addClass('open');
// ...
});
使用$('.navbar-toggle').click(function() {
代替$('.navbar-toggle span').click(function() {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.