Question

我目前正在为响应式网站进行重新设计。当我必须在页面中链接特定的jQuery文件时，我遇到了一个问题。

第一个文件位于顶部的移动菜单，基本上显示三行，当您单击它时，它会向下展开以显示菜单。

第二个脚本是我用于可折叠列表的脚本。

出现的问题是，当包含两者时，菜单总是被扩展，而不是仅在单击时扩展。可折叠列表完全按照它应该的方式运行。

我过去在同一页面上使用过这两个脚本没有问题，但是使用的是.asp页面而不是.html，我觉得这不重要吗？

以下是菜单的第一个脚本的副本：

(function ($, window, document, undefined)
{
    'use strict';

    $(function ()
    {
        $("#mobileMenu").hide();
        $(".toggleMobile").click(function()
        {
            $(this).toggleClass("active");
            $("#mobileMenu").slideToggle(500);
        });
    });
    $(window).on("resize", function()
    {
        if($(this).width() > 500)
        {
            $("#mobileMenu").hide();
            $(".toggleMobile").removeClass("active");
        }
    });
})(jQuery, window, document);

可折叠列表的脚本：

$(function prepareList() {
$('#expList').find('li:has(ul)').unbind('click').click(function(event) {
    if(this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
    }
    return false;
}).addClass('collapsed').removeClass('expanded').children('ul').hide();

//Hack to add links inside the cv
$('#expList a').unbind('click').click(function() {
    window.open($(this).attr('href'),'_self');
    return false;
});
//Create the button functionality
$('#expandList').unbind('click').click(function() {
    $('.collapsed').addClass('expanded');
    $('.collapsed').children().show('medium');
})
$('#collapseList').unbind('click').click(function() {
    $('.collapsed').removeClass('expanded');
    $('.collapsed').children().hide('medium');
})
});



//Functions to execute on loading the document

$(document).ready( function() {
prepareList()
});

我已经搞砸了一下试图找出问题，但我能找到的就是如果我取消第二个脚本的第一行，

$(function prepareList()

菜单将恢复正常工作，但折叠列表当然会停止。

如果您有任何想法尝试我会很感激！

扩展菜单和可扩展/可折叠列表之间的jQuery脚本冲突

0 个答案: