1

嗨，我总是将 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>
4

1 回答 1

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');
});
于 2013-02-13T06:10:05.820 回答