提问者:小点点

Menu-子菜单和ajax加载内容上的活动链接


我在菜单的活动项和切换的子菜单上有问题:当我点击“prensa”或“contacto”时,脚本将活动的well添加到菜单项中。例如,“prensa”获得激活,如果我点击“contacto”,它就会获得激活,将其从“prensa”中删除。

问题是,当我点击“艺术作品”,它得到的是活动类,但也从它的子菜单的所有链接。此外,如果我再次单击“prensa”,“artworks”的子菜单将保持打开,“artworks”的所有链接仍然获得活动类(也是“artworks”链接本身)。

另一个问题是,当我点击一个子菜单项时,它只添加了一个“类”,没有其他任何东西,所以我不能添加css使它处于活动状态。

这是我的标记:

        <ul id="menu" class="menu">
            <li id="artworks"><a href="#">ARTWORK</a>
                <ul class="submenu">
                    <img src="../img/submenu.png" alt="submenu" width="62" height="1" />
                    <li><a href="#" id="sweetlife">Sweet Life</a></li>
                    <li><a href="#">Pleasure</a></li>
                    <li><a href="#">Bienal de la habana</a></li>
                    <li><a href="#">Estudios de craneos</a></li>
                </ul>
            </li>
            <li id="prensa_nav"><a href="#">PRENSA</a></li>
            <li id="contacto_nav"><a href="#">CONTACTO</a></li>
        </ul>

这是我的JS:

    // active menu item
$(function() {
    $('#menu li').click(function() {
        $('#menu li').each(function() {
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});


    /* Menu dropdown */
    $(document).ready(function($){

    // Add class of drop if item has sub-menu
    $('ul.submenu').closest('li').addClass('drop');

    // Left Sidebar Main Navigation
    var menu_ul = $('.menu > li.drop > ul'),
        menu_a  = $('.menu > li.drop > a');

    menu_ul.hide()    

    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });

});

有人能帮我解决这些问题吗?


共1个答案

匿名用户

您必须只对活动菜单的直接子菜单进行样式化,而不是对所有其他子菜单进行样式化。

对于脚本,对子菜单的单击调用两次:一次在子菜单上,一次在父菜单上。第一次调用在子级上设置类,但第二次调用立即删除它。您可以防止jQuery中单击的这种“传播”。

示例:http://jsfidle.net/willemvb/q96fk/