Question

好的，所以这里是我迄今为止的JSFiddle的缩减。徘徊在'航空'上会打开菜单。我希望这样当你打开菜单时，第一个菜单项已经设置为活动状态，但当它们移动到下拉列表的“相关链接”一侧时，还需要当前悬停选择保持选中状态。

我知道很少有JS，但到目前为止，这是我想出来的菜单。

    $(document).ready(function() {
  $(".aviation").hover(function() {
    $(".aviation-menu").toggleClass("active");
  });
});
$(document).ready(function() {
  $(".aviation-menu").hover(function() {
    $(".aviation-menu").toggleClass("active");
  });
});

$(document).ready(function() {
  $("#top li").hover(function() {
    $(this).addClass("active");
  }, function() {
    $(this).removeClass("active");
  });
});

任何帮助都会大量受到感谢。

Answer 1

我认为你可以像下面一样使用它，我也在底部给了Jsfiddle链接：

$(document).ready(function() {
  $(".aviation").hover(function() {
    $(".aviation-menu").toggleClass("active");
  });
});


$(document).ready(function() {
  $("li").hover(function() {
    $("li").each(function() {
      $(this).removeClass("active");
    });
    $(this).addClass("active");
  });
});

JSFIDDLE

基本上你将删除所有＆＃34;活跃的＆＃34;当其中任何一个被徘徊时，其他列表上的类，所以它将始终有一个活动。

编辑：你也可以在开头添加这个$("li").first().addClass("active");，这样它就会有＃34; Home＆＃34;默认情况下处于活动状态。

Answer 2

你应该考虑以下几点：移动设备上没有“悬停”，你用JS做什么（在悬停时添加一个类，但实际上你想要的是一个视觉上的改变）可以用CSS来完成在我看来更好。

这是Phil Hoyt提供的纯CSS下拉菜单的一个很好的例子：http://codepen.io/philhoyt/pen/ujHzd

HTML：

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
</nav>

CSS：

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

全宽菜单JavaScript选择器

2 个答案: