Question

我在菜单的活动项目和切换的子菜单上遇到问题：当我点击＆＃34; Prensa＆＃34;或＆＃34; Contacto＆＃34;该脚本将活动井添加到菜单项。例如＆＃34; Prensa＆＃34;如果我点击了＆＃34; Contacto＆＃34;，它会自动将其从＆＃34; Prensa＆＃34;中删除。

问题是当我点击＆＃34; Artworks＆＃34;它获得了活动类，但也包含了它的子菜单中的所有链接。如果我再次点击＆＃34; Prensa＆＃34;来自＆＃34; Artworks＆＃34;的子菜单保持开放和＆＃34; Artworks＆＃34;的所有链接仍然得到活跃的课程（也是＆＃34;艺术品＆＃34;链接本身）。

另一个问题是，当我点击一个子菜单项时，它只会添加一个＆＃34;类＆＃34;没有更多，所以我无法添加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');
        }
    });

});

有人可以帮助我解决这些问题吗？

Answer 1

您必须仅设置活动菜单的直接子项，而不是所有其他子项。

对于脚本，单击子菜单会被调用两次：一次在子项上，一次在父项上。第一个调用会在子节点上设置类，但第二个调用会立即将其删除。你可以阻止jQuery中点击的这种“传播”。

示例：http://jsfiddle.net/willemvb/q96FK/

Answer 2

您使用此样式代码

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

$(document).ready(function($){

// Add class of drop if item has sub-menu
$('ul.submenu li:first').addClass('drop');
var menu_ul = $('.menu li.drop ul'),
menu_a  = $('.menu li.drop a');

最好的问候

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

2 个答案: