大型下拉菜单悬停时闪烁

2023-12-29

我在网上找到的大型下拉菜单有问题。它非常适合我的目的,但有时表现得很奇怪,并且存在闪烁问题。我找到它的链接在这里:http://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel http://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel。 作者已经知道这个问题,但本质上,如果它被隐藏的话,它在移动设备上可以很好地工作。在桌面版本上,我认为这是一个非常好的主意,我正在我构建的网站上使用:http://napoleon.larchedigitalmedia.com/ http://napoleon.larchedigitalmedia.com/.

正如我之前告诉你的,问题是调情,我猜问题出在 jquery 中:

$(".dropdown").hover(            
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
      $(this).toggleClass('open');        
    },
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
      $(this).toggleClass('open');       
    });

我不明白这是否是引导程序问题(引导程序主要使用大型下拉菜单的 onclick 事件)或者问题出在这个片段中。本质上,类 open 添加(切换)到 div 的速度太快,有时它会同时应用于两个 div。有人能帮我解决这个问题吗?


据我所知,在你的项目中,动画没有时间完成,JS 试图同时为两者制作动画。我只是改变了你的代码一点点,闪烁就停止了。

$(".dropdown").hover(            
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
  $(this).toggleClass('open');        
},
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("400");
  $(this).toggleClass('open');       
});

只需更改第二个参数stop()函数,动画自行执行。如果您想了解更多信息,总有Jquery 文档 https://api.jquery.com/stop/在功能上。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

大型下拉菜单悬停时闪烁 的相关文章

  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • Bootstrap 网格边距

    我这里有一个jsfiddle http jsfiddle net nH5WP http jsfiddle net nH5WP 这是一个使用 Bootstrap 3 的超级简单的 3 x 3 网格 我想在每个块的右侧和底部添加边距 每行中的最
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • Javascript / jQuery - 转换特殊 html 字符

    我有一个pre元素中包含一些 html 代码 该代码中有特殊字符 例如 lt 所以它不会破坏页面 然后我有一个 javascript 函数 它获取此 pre 元素的内容 突出显示它 使用 codemirror 并用突出显示的文本替换元素内容
  • 如何使用 jQuery 获取表格单元格值?

    我正在尝试找出如何使用 jQuery 获取每行表格单元格的值 我的桌子看起来像这样 table tr th Customer Id th th Result th tr tr td 123 td td td tr tr td 456 td
  • jQuery - 检测鼠标是否静止?

    我想知道是否有一种方法可以检测 jQuery 中鼠标是否空闲了 3 秒 是否有我不知道的插件 因为我不相信有一个原生的 jQuery 方法 任何帮助将非常感激 您可以收听mousemove事件 每当发生时启动超时并取消任何现有超时 var
  • Angular 完成渲染后运行 jQuery

    我正在尝试使用 angularjs 中的 json 对象填充个人资料页面 我正在为此使用指令 我有一个配置文件指令 其中包含配置文件部分指令作为子项 配置文件部分具有作为子级的配置文件子部分指令 我需要在 Angular 开始编译之前和 A
  • 通过jquery传递搜索参数

    我有一个表单 如果用户输入搜索查询 其参数应通过 jquery 传递 并在获取结果后将结果加载到 div 容器中 由于我不太熟悉 jquery 我该怎么做 html currently the data is being displayed
  • jQuery能否获取未绘制的动态元素的大小

    我的意思是如果我用 jQuery 和 DOM 创建一个 Element var MainHolder document createElement div addClass box 如果我打电话MainHolder width 如果不在窗口
  • 如何使用 Jquery 将列表项追加到列表的第一个位置

    如何使用 Jquery 将列表项追加到列表的第一个位置 ul li First li li Second li li Third li li Fourth li ul 是否可以在第一个之前附加一个列表项 li 用jquery 我试着 myl
  • 使用 jQuery 和 jQuery UI 运行任何 Jest 测试时出现问题

    所以我有一个名为的开源库Angular Slickgrid https github com ghiscoding Angular Slickgrid还没有测试 我正在尝试使用 Jest 但真的很难使用它 该库是旧的 jQuery 数据网格
  • 将 javascript 合并到一个文件中

    最近阅读了雅虎的网络优化技巧并使用 YSlow 我在我的一个网站上实现了他们的一些想法http www gwynfryncottages com http www gwynfryncottages com你可以在这里看到该文件http ww
  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s
  • 有什么方法可以在不重新加载的情况下更改标头 URL? [复制]

    这个问题在这里已经有答案了 可能的重复 修改URL而不重新加载页面 https stackoverflow com questions 824349 modify the url without reloading the page 使用新
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 有一个带有复选框的 jsTree,如何禁用所有复选框?

    我有一个动态构建的 jsTree 它允许用户选择他选择的任何节点 现在我试图使这棵树只读 以便其他用户可以看到信息而不改变它 我找到的所有示例都是关于禁用特定节点 我的问题是 有没有办法将树上的所有复选框定义为只读 正在使用的代码 jQue
  • 使用 jQuery 解析无效的 HTML,而不添加到 DOM?

    我正在开发一个使用 HTML 模板的 jQuery 插件 最终用户可以传入一个最简单级别的模板 如下所示
  • Jquery获取每个div的子子div并将信息抓取到数组中

    我有一些看起来像这样的 html div div class sub main div div
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 如何禁用 TinyMCE 文本区域

    我已经尝试了以下所有方法 tbxNote attr disabled disabled doesn t work tbxNote attr disabled true doesn t work either tinyMCE init mod

随机推荐