jQuery错误地导致悬停
jQuery mistakenly causes hover
我想用jQuery显示隐藏的导航。这是我的代码:
$(document).ready(function() {
var x = 0;
$(".navbar-fixed-top").mouseover(function() {
console.log("555");
if (x != 1) {
$(".header-triangle").fadeToggle();
$(".topbar-menu").slideToggle();
}
x = 0;
});
});
.topbar-menu {
background-color: rgba(84, 84, 84, 0.4);
height: 40px;
line-height: 40px;
direction: rtl;
display: none;
}
#fix-header {
background-color: rgba(84, 84, 84, 0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-xs">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid" id="fix-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/150_50.png" alt="image">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class=" hidden-xs ">
<a id="navbar-menu" href="#">
<img id="menuHeader" src="img/hamburgerMenu.png">
</a>
</li>
<li class="visible-xs"><a href="#">example </a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="searchbox-navigation">
<form class="navbar-form" role="search">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default " type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
<input type="text" class="form-control" style="direction: rtl;" placeholder="search" name="q">
</div>
</form>
</div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
<div class="topbar-menu container-fluid hidden-xs">
</div>
</nav>
</div>
<script src="js/headerEvent.js"></script>
当我离开该部分的鼠标时,它会记录另一个"555"。 为什么会这样?我只想记录一次。
这里有一个代码笔链接:http://codepen.io/anon/pen/RaGLWd您可以将其更改为mouseenter或mouseleave以仅触发一次:
$(".navbar-fixed-top").mouseenter(function() {
console.log("555");
if (x != 1) {
$(".header-triangle").fadeToggle();
$(".topbar-menu").slideToggle();
}
相关文章:
- 悬停时IE 8中的脚本错误
- 悬停快速幻灯片错误
- 火狐错误 - 悬停时选项消失
- Jquery 图像悬停效果错误
- jQuery错误地导致悬停
- JQuery - 不要在按钮成功/错误时添加悬停类
- Jquery滑动悬停功能显示.stop错误(但仍然有效)
- IE8 JavaScript 错误鼠标悬停错误
- 反向悬停 DIVS 时显示错误背景图像的函数
- 在 js 中将鼠标悬停会引发未定义的错误
- 悬停时转换的角度自定义指令显示错误
- 在悬停函数jquery中调用ajax函数后出现错误
- jQuery悬停函数IE错误
- 在Linux上的home上触发错误的鼠标悬停事件
- Jquery/JS css动画在悬停时工作错误
- Fullcalendar插件在悬停时出现Javascript错误
- x/y轴的倍数和鼠标悬停示例-行路径显示错误的值
- jQuery/Foundation:未捕获类型错误:对象#<对象>没有方法'悬停'
- Ajax重新加载数据聊天.js显示错误的鼠标悬停在图形上
- 捕捉.svg悬停/取消悬停错误(用于更长的悬停)