1

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

CSS 正在工作和样式化，以及在 onload 事件中将li和a标记类设置为“活动”的 javascript。我错过了什么？我得出的结论是错误在 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>
4

1 回答 1

0

您现有的代码似乎运行良好，请参阅DEMO

编辑

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

If you look at the original demo I linked above which has no styles you see the slide down/up takes the 100 milliseconds as specified.

If you look at your DEMO with the CSS you see the menus just appear.

After a little trial and error I pinpointed the CSS causing this. If you remove the below section from the CSS your animation of the sub-menu is working again as expected.

/* 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 */
}

The above CSS overwrites the animation from the slide down/up methods and simply displays the sub-menu as a block instead. It still works if you leave the IE6 fix in but you have to remove the CSS for #menu ul li:hover ul :

/* 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 */
}

I applied the changes to the fiddle and it is working now.
See DEMO

于 2012-08-05T22:03:38.687 回答