Question

jquery新手。希望显示/隐藏水平菜单栏项。我已经尝试了几次迭代但没有成功。

CSS正在运行并设置样式，并且javascript会将li和a标记类设置为＆＃34;活动＆＃34;在onload事件中。我错过了什么？我总结错误是在jquery中，虽然它可以更简单。解释很有帮助。我很感激使用现有html的建议。

div id = menu的主要目的是启用栏的居中。

我的剧本

修改1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

$(document).ready(function() {
    $('#nav li').hover(function() {
        //show its submenu
        $('ul', this).slideDown(100);
    }, function() {
        //hide its submenu
        $('ul', this).slideUp(100);
    });
});

我的Html

<div id="menu">
    <ul id="nav">
        <li id="lhome" class="">
            <a href="index.php" id="ahome" class="">Home</a>
        </li>
        <li id="lprod" class="">
            <a href="products.php" id="aprod" class="">Products</a>
            <ul>
                <li><a href="#">Link one</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
            </ul>
        </li>
        <li id="ltest" class="">
            <a href="testimonial.php" id="atest" class="">Testimonials</a>
            <ul>
                <li><a href="#">Link one</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
            </ul>
        </li>
        <li id="lcont" class="">
            <a href="contact.php" id="acont" class="">Contact&nbsp;Us</a>
        </li>
    </ul>
</div>

Answer 1

您现有的代码似乎运行正常，请参阅DEMO

修改

根据您的反馈，我做了更多研究，发现您的CSS干扰了动画。

如果您查看上面链接的原始演示，其中没有样式，您会看到向下/向上滑动指定的时间为100毫秒。

如果您使用CSS查看DEMO，则会看到菜单刚出现。

经过一番试验和错误后，我确定了导致这种情况的CSS。如果从CSS中删除以下部分，则子菜单的动画将按预期再次运行。

/* Make the sub menus appear on hover */ #menu ul li:hover ul, #menu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ }

上面的CSS会从向下滑动/向上滑动方法覆盖动画，而只是将子菜单显示为块。如果您保留IE6修复程序但仍必须删除#menu ul li:hover ul的CSS：
，它仍然有效
/* Make the sub menus appear on hover */ #menu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ }

我将这些变化应用于小提琴，它现在正在运作见DEMO

在jquery中定位元素 - 没有向上/向下滑动

1 个答案: