【问题标题】:change menu behavior with purely CSS or JAVASCRIPT [closed]使用纯 CSS 或 JAVASCRIPT 更改菜单行为 [关闭]
【发布时间】:2015-06-19 00:33:53
【问题描述】:

需要用纯 CSS 或 JAVASCRIPT 更改菜单 该菜单适用于在线商店。有类别,子类别在类别中折叠。我希望在页面加载时自动展开子猫,这样用户就不必单击它们来展开。我的域名是:www.tackpal.com

【问题讨论】:

  • 尝试检查类别项目,看看它们是否有一个特殊的类,如openactive,如果有,那么将这些类设置在要在 html 标记中打开的项目上。如果没有,那么您可以在页面加载时通过 javascript 触发点击事件
  • 有一个活跃的类
  • media="screen" a:active { color: #123851; }
  • 能否请您发布到目前为止您尝试过的代码?您的问题看起来好像您自己没有尝试过,您只是希望我们为您编写代码,这不是我们真正要做的。我们在这里帮助您解决您至少尝试过自己解决的问题。
  • 请提供一个小代码示例来重现您的问题。使用“实时”站点是不可行的,因为当您尝试解决问题时,您正在呈现一个移动的目标。此外,这个问题对未来的用户来说变得毫无意义,因为他们没有问题的参考点。此外,必须挖掘整个页面代码既乏味又耗时,请帮助我们帮助您。最后也是最重要的一点,通过将其分解为问题,您可能会找到解决方案。

标签: javascript css


【解决方案1】:

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

如果他们允许,您的第一个解决方案是在您的 CMS 中编辑菜单模板。

下面有一个解决方案/HACK,但更改 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);
    }
};

这个脚本可能只在HOME PAGE ONLY工作,因为我没有在你的其他页面上测试过。如果添加到其他页面,它可能会在各个类别页面上创建重复的子类别列表。

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

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

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

【讨论】:

    【解决方案2】:

    首先您需要了解它是如何折叠/展开的。 在大多数情况下,菜单会被一个类折叠起来,并用另一个由 javascript 添加的类来展开。 (甚至交换)

    不看 css 真的很难说什么。 要么编辑类别的当前默认类

    height:0;
    

    display:none;
    

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

    再一次,没有代码很难说

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-03-03
      • 1970-01-01
      • 1970-01-01
      • 2017-02-16
      相关资源
      最近更新 更多