Question

我的网站上有一个水平下拉菜单。目前只有两个层次：

<ul><li>Option 1
    <ul><li>Option 1.1
        <ul>
            <li>Option 1.1.1</li>
            <li>Option 1.1.2</li>
        </ul>
    </li></ul>
</li></ul>

选项1图层始终可见。 1.1悬停在选项1上时可见，选项1.1.1和1.1.2在悬停在选项1.1

上时可见

客户说他们喜欢下拉菜单。但是，从选项1.1.1到选项1.1.2，您需要再次导航多级菜单，这是他们不喜欢的机制。

我有想法检测用户所在的选项页面然后修改这些类以便它们始终可见。例如：如果我在选项1.1.1页面上，则仍然可以看到完整菜单，以便轻松访问选项1.1.2

通过JQuery和Javascript从URL返回Option然后搜索多级菜单以将类添加到菜单允许它以某种方式运行是否可行。

我不知道从哪里开始。

我的网址结构如下：

[root]/category.php?alias=option111
[root]/category.php?alias=option112

我不确定如何搜索菜单。你能提供一些帮助吗？

Answer 1

首先，你必须知道你在哪个别名。您可以使用PHP将其解析为javascript，或者您可以检查document.location.href并使用正则表达式进行修复。

例如，如果您发现别名是option111，则必须在进入该菜单所需的菜单项上触发鼠标悬停。

$.document.ready(function() {

    //Fix something that 'alias' is an array and contains the numbers of menuitems that you use in your id structure of the menuitems.

    alias.each(function() {
        $('#menuitem'+$(this)).trigger('mouseover');
    });
});

这只是您可以使用的概念。我希望你能用这个想法。

- 发表评论后编辑 -

给你一个dropdownmenu id可能是有用的，这类似于他们在heirarchy中的位置。这样，您可以使用url中的别名查看应打开哪些dropdownmenu项目。这样我们就可以循环（我们可以使用while，each或者你喜欢的任何方式）。

var alias = document.location.href.slice(6,0); // getting the alias (ex: 111)
var i = 0;
while(i < alias.length) { //for each alias character (menu, submenu, subsubmenu, etc)
$('#menuitem'+alias.substring(0,i).trigger('mouseover'); //trigger the mouseover for ex #menuitem1, or #menuitem32, or #menuitem152
i++; //increment i to make the loop finite.
}

或者，如果你的鼠标悬停事件显示菜单很短的时间，你可以使用 $('#menuitem'+alias.charAt(i)).css('display','block');代替

$('#menuitem'+alias.charAt(i)).trigger('mouseover');

Answer 2

您是否考虑过使用jQuery UI 1.9中的菜单下拉菜单（以及Github中的already available？）

您需要调整样式以使主菜单水平（并始终可见），或者将每个顶级<li>元素视为触发与其子项关联的单独$.menu()项目<ul>元素。

我在http://jsfiddle.net/tcg2m/12/

添加了一些演示代码

需要做一些工作来弄清楚如何使顶级菜单水平而不是垂直。

下拉菜单问题。在某些情况下保持下降

2 个答案: