如何使用 HTML5、CSS3、Javascript/Jquery 单击此导航栏跟踪项？

Question

我想使用 li 和 ul 使导航栏具有以下交互，类似于下图，但我想知道如何做的是当用户单击项目时保存 state。 参考图像如下：

1. 1) 子菜单开始时没有显示任何内容。

   2) 将鼠标悬停在其中一个项目上，例如“项目 1”将显示项目 1 的关联子项目。将鼠标悬停在项目 2 上将显示项目 2 独有的关联子项目。

   3) 单击一个子项，将使其突出显示并停留在那里，除非用户决定将鼠标悬停在不同的项上并单击不同的子项。

交互步骤示例：假设用户在项目 1 上并单击子项目 2。即使用户将鼠标移开它，它仍保持突出显示。

• a) 然后用户将鼠标悬停在项目 3 上并从项目 3 中选择一个子项目。之前突出显示的子项目不再突出显示，而是突出显示新选择的子项目。
• b) 用户将鼠标悬停在项目 3 上只是为了查看项目 3 下的项目，但是当鼠标移开时，它会在顶部显示回原来的 state，项目 1 的子项目 2 突出显示。

最好的方法是什么以及如何做到这一点？ 非常感谢。

Answer 1

您可以使用.show()和 .hide( .hide()函数。

尝试这样的事情：

<ul class="menu">
  <li><a href="#submenu_1">Item 1</a></li>
  <li><a href="#submenu_2">Item 2</a></li>
</ul>

<ul class="submenu" id="submenu_1">
  <li>...</li>
</ul>

<ul class="submenu" id="submenu_2">
  <li>...</li>
</ul>

$(document).ready(function(){
  $(".submenu").hide();

  $(".menu a").click(function(){
    var submenu_todisplay = $(this).attr("href"); 
    $(".submenu").hide();
    $(submenu_todisplay).show();
  });
});

我没有测试这段代码，但它是向您展示如何开始。 您可以使用.hover()而不是 .click( .click()并且必须添加 CSS。

Answer 2

可能是我不太了解..但有什么问题？ 您可以使用 onClick、onMouseOver、onMouseDown。 关于机制-我认为如果有很多项目（在您的示例中，每个（？）项目中只有 3 个项目和 3 个子项目），那么您应该将其设为“b）”方式。 但是，如果情况与您的示例相同，那真的没关系-只需尝试看看-您最喜欢什么）

Answer 3

简单的无序列表：

<ul id="nav">
    <li>Item 1
        <ul>
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
            <li>Subitem 1.3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
            <li>Subitem 2.3</li>
        </ul>
    </li>
    <li>Item 1
        <ul>
            <li>Subitem 3.1</li>
            <li>Subitem 3.2</li>
            <li>Subitem 3.3</li>
        </ul>
    </li>
</ul>

一些 CSS 对其进行样式设置：

ul {
    display:none;
    width:250px;
}
#nav {
    display:block;
}
li {
    float:left;
    position:relative;
    top:5px;
    background-color:#000;
    width:80px;
    height:25px;
    text-align:center;
    color:#FFF;
    cursor:pointer;
}
#nav>li {
    background-color:#666;
}

简单的 JQuery 使其工作：

$('li').mouseenter(function(){
    $(this).children('ul').show();
});

$('li').mouseleave(function(){
    $(this).children('ul').hide();
});

演示： http://jsfiddle.net/Ct4hM/

Answer 4

我会将 state 保存为项目/子项目的特定 class。

您可以在 hover 上有一个经典的全 CSS 菜单显示子菜单，并在单击时将选定的类设置为正确的元素。 然后在所选类上使用特殊的 css 确保显示右侧子菜单，并在鼠标未悬停菜单时选择右侧元素。

然后，您可以确保在悬停另一个项目时显示另一个菜单，方法是：hover 子菜单出现在选定的子菜单之上。

你可能不得不在位置上有点挣扎，但如果你不介意绝对定位，那应该不是这样的问题。

这是一个工作示例： http://jsfiddle.net/Ct4hM/2/