Question

嗨我总是使用这个jquery代码用于菜单，问题是我现在使用更新版本（我认为）的jquery，因为我的客户端问一个停靠菜单Mac风格，...实际上菜单工作，只是slideDown功能不保持打开，所以菜单不起作用..

我曾经使用过这个jquery ..

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

使用此代码：

<script type="text/javascript">
$(document).ready(function(){

    $("ul.submenu").parent().append("<span></span>"); 

    $("ul.menu li span").hover(function() { //Al hacer click se ejecuta...

        //Con este codigo aplicamos el movimiento de arriva y abajo para el submenu
        $(this).parent().find("ul.submenu").slideDown('fast').show(); //Menu desplegable al hacer click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.submenu").slideUp('slow'); //Ocultamos el submenu cuando el raton sale fuera del submenu
        });

        }).hover(function() {
            $(this).addClass("subhover"); //Agregamos la clase subhover
        }, function(){  //Cunado sale el cursor, sacamos la clase
            $(this).removeClass("subhover");
    });

});
</script>

此代码保持不变，我现在只在我的标题上使用此代码..

<script src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

毕竟问题是如何重写那些线来实际使菜单有效......

这是有效的http://www.dreaminmedia.com/imdr/quienessomos.php

这是HTML

<div id="menuwrap">
<ul class="menu">
    <li><a href="#">Inicio</a></li>
    <li>
        <a href="#">Tutoriales</a>
        <ul class="submenu">
            <li><a href="#">CSS</a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Códigos</a>
        <ul class="submenu">
            <li><a href="#">Reloj en Flash</a></li>
            <li><a href="#">Fecha con JS</a></li>
            <li><a href="#">XML y AS</a></li>
            <li><a href="#">RSS y PHP</a></li>
            <li><a href="#">ASP a Excel</a></li>
            <li><a href="#">PHP a Excel</a></li>
        </ul>
    </li>
    <li><a href="#">Sobre Nosotros</a></li>
    <li><a href="#">Politica</a></li>

    <li><a href="#">Contactanos</a></li>
</ul>
</div>

Answer 1

如果您使用的是最新的jquery，那么您需要的是事件委派：

更改此行：

$("ul.menu li span").hover(function() { //Al hacer click se ejecuta...

到此：

$("#menuwrap").on('hover', 'ul.menu li span', function() { //Al hacer click se ejecuta...

@您的最新评论：

$("#menuwrap").on('hover', 'ul.menu li span', function () {
   $(this).addClass("subhover");
}, function () {
   $(this).removeClass("subhover");
});

$("#menuwrap ul.menu li").hover(function () {
     $("> ul.submenu", this).stop().slideDown('fast').show();
}, function () {
     $("> ul.submenu", this).stop().slideUp('slow');
});

Jquery菜单语法不起作用

1 个答案: