jquery - 我的 jquery 下拉菜单表现得很疯狂-6ren

jquery - 我的 jquery 下拉菜单表现得很疯狂

转载作者：行者123 更新时间：2023-11-28 13:50:32

25

4

大家好，我正在为我的网站构建一个下拉菜单，我想使用 jquery 它确实按照我想要的方式工作但是。我一直在第二个 ul 上获得快门效果，但对第一级没有影响。我知道我很接近并且遗漏了一些明显的东西。我在这篇文章的同一页面中包含了菜单的所有 css

在这里

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#nav li').hover(function() { //When trigger is clicked...
    var me = this;
    //Following events are applied to the subnav itself (moving subnav up and down)
    $(me).find('ul.subnav').slideDown('slow').show(); //Drop down the subnav on click
    $(me).click(function() {
    }, function(){
        $(me).find('ul.subnav').slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });
});
 $('#nav ul ul li:has(ul)').addClass("parent");
      $('#nav ul ul li:has(ul)').hover(function(){
          $(this).addClass('hoverParent');
           $('ul li', this).toggle("fast");
      },function(){
          $(this).removeClass('hoverParent');

      });
});
</script>
<!--<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css"/>-->

<style>
    * {
        padding: 0px;
        margin: 0px;
}
  #nav {
    width: 960px;
    height: 30px;
    background-color: #333333;
}

ul.nav {
    margin-left: 0px;
    padding-left: 0px;
    list-style: none;
    overflow: visible;
}
ul.nav li {
    float: left;
    position: relative;

}
ul.nav a {
    width: 8em;
    display: block;
    padding: 5px;
    text-decoration:none;
    color: #FFF;
    text-align: center;
}
ul.nav li a:hover {

    color: #33ff66;
}
.parent {
    background-image: url("images/arrow-select.png");
    background-repeat: no-repeat;
    background-position: right center;
}.parent2 {
   background-image: url("images/arrow-select.png");
    background-repeat: no-repeat;
    background-position: right center;
}
.hoverParent {
    background-image: url("images/arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
}
div#nav ul ul li {
text-decoration: none;
color: white;
text-align: center;
background-color: #333333;
border: 1px solid #666  ;
border-top-color: #999999;
list-style: none;
}
div#nav ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}
div#nav ul ul {
    position: absolute;
    z-index: 500;
}
div#nav ul ul {display: none;}
div#nav ul li:hover ul{display: block;}
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}

div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul
{
    display: block;
}
</style>
</head>
<body>
<div id="nav">
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Surf Boards</a>
        <ul class="subnav">
            <li ><a href="#">Long Boards</a>
                <ul class="subnav">
                    <li ><a href="#">Hard Boards</a></li>
                    <li><a href="#">Soft Boards</a></li>
                </ul>
            </li>
            <li><a href="#">Template 2</a></li>
            <li><a href="#">Template 3</a></li>
        </ul></li>
    <li><a href="reviews.html">Clothing</a>
                <ul class="subnav">
                    <li><a href="#">Shorts</a></li>
                    <li><a href="#">Shirts</a></li>
                    <li><a href="#">Hoodies</a></li>
                </ul>
    </li>
    <li><a href="reviews.html">Accessories</a>
            <ul class="subnav">
                <li><a href="#">Stickers</a></li>
                <li><a href="#">Board Combs</a></li>
                <li><a href="#">Leg Ropes</a></li>
            </ul>
    </li>
    <li><a href="reviews.html">Events</a>
        <ul class="subnav">
            <li><a href="#">ASAP</a></li>
            <li><a href="#">Indigenous</a></li>
            <li><a href="#">International</a></li>
        </ul>
    </li>
    <li><a href="reviews.html">Contact Us</a></li>
</ul>
</div>
</body>
</html>

最佳答案

问题是由您的 CSS 引起的。当您将鼠标悬停在父菜单项上时，它会变为 display: block 并且 jquery 代码会将其切换回 display: none。要通过 jQuery 修复它，试试这个 - http://jsfiddle.net/WRM9X/

$('#nav ul ul li:has(ul)').addClass("parent");
      $('#nav ul ul li:has(ul)').hover(function(){
          $(this).addClass('hoverParent');
          $('ul li', this).css("display", "none").toggle(300);
      },function() {
          $(this).removeClass('hoverParent');
      });
});

或者您可以通过 CSS 修复它，方法是不在父鼠标悬停时使该子菜单 display: block

关于jquery - 我的 jquery 下拉菜单表现得很疯狂，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11423397/

25

4

0

文章推荐： ios - 电视操作系统 UIFocusEnvironment 没有聚焦按钮

文章推荐： php - 在 Javascript 和 php 中实现计时器的最佳方法

文章推荐： jquery - 无论如何在 jQuery 中的背景图像之间淡入淡出？

文章推荐： html - 解决链接之间的间隙问题，而不必将代码放在一行中

pthreads - sleep 表现
我正在用 C++ 开发一个程序，我必须实现一个 cron。由于不同的原因，这个 cron 应该每小时和每 24 小时执行一次。我的第一个想法是创建一个独立的 pthread 并在每次 1h 内休眠。这
javascript - 具有不同纹理的多个体素。表现
我需要向同一场景几何添加多个体素(立方体等于)，但每个体素具有不同的纹理。我的体素超过 500 个，导致性能出现严重错误。这是我的代码: texture = crearTextura(voxel.
mysql - 每个用户保存相似记录的单个表还是单独的表？ (表现？？)
对于 MySQL 数据库，我有 2 个场景，我不确定该选择哪一个，并且对于一些表我也遇到了同样的困境。我正在制作一个仅供成员(member)访问的网络应用程序。每个成员都有自己的交易、费用和“列表”
css - 我应该使用哪个？ (表现)
我想知道一个简单的事情: 当设置一个被所有 child 继承的样式时，是否建议最具体？ Structure: html > body > parent_content > wrapper > p 我想
c++ - 矩阵的乘法。表现
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
java - JPA中的显式和隐式JOIN有什么区别？ (表现)
这些天我正在阅读有关 JPA 的内容。我了解到可以在 JPQL 中使用 explicit 或 implicit JOIN。显式加入 em.createQuery(“SELECT b.title, p
c# - 字符串连接与字符串生成器。表现
我有一种情况需要连接几个字符串以形成一个类的 id。基本上，我只是在列表中循环以获取对象的 ToString 值，然后将它们连接起来。 foreach (MyObject o in myList)
javascript - Canvas fillStyle 表现
我正在检查我的游戏在拖尾效果下的性能会降低多少。但我注意到每秒的操作次数更多了。这怎么可能？这是怎么回事... context.fillRect(0, 0, 500, 500); // cl
php - PHP 中的全局变量或传递变量？ (表现)
如果我可以选择使用全局变量或传递变量，哪个选项在速度和内存使用方面更好？ // global variable function func(){ global $var; echo $var;
mysql select 按主键排序。表现
我有一个类似这样的表“tbl”:ID bigint(20) - 主键，自增字段1字段2字段3 该表有 60 万多行。查询:SELECT * from tbl ORDER by ID LIMIT 60
algorithm - 旅行商 (TSP) 表现
谁能告诉我，我如何比较 TSP 最优和启发式算法？我已经实现了 TSP，但不知道如何比较它们。事实上，我怎样才能找到 TSP 的最优成本？有什么方法或猜测吗？谢谢最佳答案用众所周知的基准实例检查
ios - NSTextStorage 里面有长文本。表现
我有一个 NSTextStorage里面有长文本(比如一本书有 500 页，当前字体在设备上超过 9000 页)。我以这种方式为 textcontainer 分发此文本: let textStorag
c# - 按邮政编码查找产品 |半正弦算法 |表现
我有一个根据邮政编码搜索项目的应用程序。在搜索邮政编码时，我返回了来自该城市/社区的所有产品(通过解析邮政编码完成)。我现在需要根据与原始邮政编码的距离对这些产品进行分类。我将纬度/经度存储在数
performance - MPI Alltoallv或更好的个人Send and Recv？ (表现)
我有许多进程(大约100到1000个进程)，每个进程都必须向其他进程(例如大约10个)发送一些数据。 (通常，但不一定总是这样，如果A发送给B，B也发送给A。)每个进程都知道必须从哪个进程接收多少数据
performance - 带有 shouldComponentUpdate 的组件与无状态组件。表现？
我知道无状态组件使用起来更舒服(在特定场景下)，但是既然你不能使用shouldComponentUpdate，这是否意味着组件将在每次props更改时重新渲染？我的问题是，使用带有智能 shouldC
javascript - CSS/JS 即时缩小？ (表现)
我正在研究 Google Pagespeed 的加速页面加载时间指南列表。其中之一是缩小 CSS 和 JS 文件。由于这些文件经常更改，我正在考虑使用 PHP 脚本根据请求(来自浏览器)即时缩小此脚
MySQL 选择每个运动员的最佳(和最老)表现、类别
我正在尝试从下表构建 SQL 查询(示例): Example of table with name "performances" 这是带有运动表现的表格。我想从这个表中选择每个学科和一组一个或多个类别
c++ - 表现。寻找子串。 substr 与查找
假设我们有一个字符串 var "sA"，我想检查字符串 "123"是否在 sA 的末尾。什么更好，为什么: if(sA.length() > 2) sA.substr(sA.length()-3)
c# - Linq group by property 表现
关于受这篇文章启发的可参数化查询 LINQ group by property as a parameter我获得了一个很好的参数化查询，但在性能上有一个缺点。 public static void
c++ - 运算符(operator)表现|与运营商+
| 和| 之间有什么主要区别吗？和 + 从长远来看会影响代码的性能吗？或者都是 O(1)？我正在使用的代码是这样的: uint64_t dostuff(uint64_t a,uint64_t b){

首页

博学

6Ren·AI

商城

jquery - 我的 jquery 下拉菜单表现得很疯狂