使用纯CSS或JAVASCRIPT更改菜单行为

Question

需要使用纯CSS或JAVASCRIPT更改菜单 该菜单适用于在线商店。有类别，子类别在类别中折叠。我希望在页面加载时自动展开子猫，以便用户不必单击这些以展开。我的域名是：wwww.tackpal.com

Answer 1

首先你需要找到它的折叠/扩展方式。 在大多数情况下，菜单将与类折叠，并使用javascript添加的另一个类进行扩展。 （甚至交换）

没有看css很难说真的。 编辑当前默认的类别类别

height:0;

或

display:none;

删除它。也不要忘记删除绑定到菜单的点击功能，这样如果有人点击菜单

就不会触发

再次，没有代码很难说

编辑：没关系，我跟着你的链接。我认为通过ajax调用插入子类别。我检查了几个js文件并且它们都缩小了，如果你没有源代码，你可以忘记这样做

Answer 2

因此，我查看了您的网站，当用户点击某个类别时，他们实际上会被带到该特定类别的网页。 因此，目前子类别未包含在主页中。

您的第一个解决方案是在CMS允许的情况下编辑CMS中的菜单模板。

以下解决方案/方法，但更改CMS中的模板会更好

如果添加此代码，当用户访问主页时，下面的脚本将告诉浏览器对所有具有子类别的类别进行Ajax调用。返回每个类别页面源时，它会找到子类别列表并将它们分别插入主页的菜单。

测试此代码。您只需转到网站的主页即可。然后，打开控制台并粘贴第一个函数，然后粘贴onload函数中的脚本。

//a simple function used to make an ajax call and run a callback with the target page source as an argument when successful
function getSubPageSource(url, successCallback)
{
    var xhr = XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
        {
            //when source returned, run callback with the response text
            successCallback(xhr.responseText);
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}

//wrap in onload event
window.onload = function() {  

    //find all categories with sub categories
    var categories = document.getElementsByClassName('has-subcategories');
    //loop through each category
    for (var ii = 0, nn = categories.length; ii < nn; ii++)
    {
        //use a closure to pass in a static ii
        (function(ii)
        {
            //get element
            var element = categories.item(ii);
            //find id
            var id = element.getAttribute('data-category');
            //find url
            var href = element.getAttribute('href');
            if (id && href)
            {
                //found
                getSubPageSource(href, function(data)
                {
                    //find sub categories
                    //trim off everything before where id shows up first
                    var substrSource = data.substr(data.indexOf('data-category="'+id+'"'));
                    //trim off the remaining of the category title
                    substrSource = substrSource.substr(substrSource.indexOf('</a>'));
                    //trim off where the next category is found
                    substrSource = substrSource.substr(0, substrSource.indexOf('home-categories-main'));
                    //trim off where the next category starts, leaving source of all sub categories
                    substrSource = substrSource.substring(0, substrSource.lastIndexOf('<a '))

                    //insert to main menu after the title
                    console.log(id, substrSource);

                    //create new node capable of having children
                    var newNode = document.createElement("span");
                    //insert new source into the new node
                    newNode.innerHTML = substrSource;

                    //insert new node after element
                    element.parentNode.insertBefore(newNode, element.nextSibling);
                });
            }
        })(ii);
    }
};

此脚本可能仅适用于主页，因为我尚未在其他页面上对其进行测试。如果添加到其他页面，则可能会在相应的类别页面上创建重复的子类别列表。

注意：第二种方法的一个巨大缺点是，每当有人访问您的主页时，他们在后台的浏览器就会访问所有具有子类别的类别页面。这意味着您的服务器必须为每次主页访问提供多个页面。

我真的建议您找一种方法来编辑CMS中的菜单模板而不是上面的脚本

上面的粘贴脚本，您的主页生成了必要的链接，如下面的屏幕截图所示。