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

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 和 1.1.2

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

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

通过 JQuery 和 Javascript 从 URL 返回选项，然后通过多层搜索是否可行？ menu 将类添加到菜单中，使其以某种方式运行。

我不知道从哪里开始。

我的 URL 结构如下：

[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');
    });
});

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

-在您的评论后进行编辑-

为您提供下拉菜单 ID 可能会很有用，这些 ID 与它们在 .这样您就可以使用 url 中的别名查看应打开哪些下拉菜单项。这样我们就可以循环（我们可以使用 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 中已经可用？）

您需要调整样式以使主菜单水平（并且始终可见），或者交替对待每个顶级

元素作为链接到其子

元素的单独 $.menu() 项的触发器。

我已经将一些演示代码放在 http://jsfiddle.net/tcg2m/12/

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