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

【问题标题】：Menu - Submenu and active links on ajax loaded content菜单 - ajax 加载内容的子菜单和活动链接
【发布时间】：2012-10-15 08:51:13
【问题描述】：

我对菜单的活动项目和切换的子菜单有疑问：当我单击“Prensa”或“Contacto”时，脚本会将活动井添加到菜单项。例如，“Prensa”获得了活动，如果我点击“Contacto”，它就会从“Prensa”中删除它。

问题是当我点击“艺术品”时，它会得到活动类，但也有来自它的子菜单的所有链接。此外，如果我再次单击“Prensa”，“艺术品”的子菜单将保持打开状态，并且“艺术品”的所有链接仍会获得活动类（还有“艺术品”链接本身）。

另一个问题是，当我点击一个子菜单项时，它只添加了一个“类”而没有其他任何内容，因此我无法添加 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');
        }
    });

});

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

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

您必须只为活动菜单的直接子级设置样式，而不是为所有其他子级设置样式。

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

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

【讨论】：

谢谢，它可以在小提琴上运行，但是当我将它添加到我的 loader.js 时，它会在代码的最后一行出现“意外令牌非法”。此外，它看起来不错，但仍然存在问题，子菜单始终保持打开状态:(
您希望在单击另一个菜单时关闭子菜单？我稍微重写了你的代码：jsfiddle.net/willemvb/q96FK/4
哇，你太棒了，解决了我所有的问题哈哈。非常感谢！！！

【解决方案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');

最好的问候

【讨论】：

它可以删除“艺术品”上的活动链接，但下拉子菜单始终与该脚本保持打开状态
再试一次，子菜单仍然打开...永远不会下拉或切换。