demo

Question

我在尝试理解javascript时非常陌生，而且我一直在试图弄清楚我做错了什么，但是不能让这个工作正常。有一次我使用onmouseover / mouseout，但它只能在1个菜单上工作。

我确信这是我忽略的一些简单，但任何帮助都会受到赞赏。

jQuery(document).ready(function($) {
$('#top-menu').hover(
  function () {
    $('#submenu').show(active);
  },
  function () {
    $('#submenu').hide(non-active);
  }
);
});

<ul id="menu" class="nav-menu">
    <li>Home</li>
    <li id="top-menu"><a href="#">About Us</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>US</li>
        <li>Our Style</li>
        <li>The Experience</li>
    </ul>
    <li id="top-menu"><a href="#">Galleries</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>Weddings</li>
        <li>Engagements</li>
        <li>Featured Weddings</li>
    </ul>
    <li id="top-menu"><a href="#">The Details</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>Investment</li>
        <li>Press and Awards</li>
        <li>Testimonials</li>
    </ul>
    <li>FAQ</li>
    <li>Contact</li>
    <li>The Blog</li>
</ul>

.nav-menu {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    font-weight:bold;
    font: 24px'Playfair Display', Georgia, serif;
}
.navmenu ul li {
    margin:30px;
}
.non-active {
    display:none;
}
.active {
    display:inline;
}

Answer 1

它没有回答您的具体问题，但使用CSS可以轻松实现相同的行为。这样，您就不依赖于打开javascript进行标准菜单访问。

http://jsfiddle.net/EmcPY

HTML

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Galleries</a>

        <ul>
            <li>Gallery #1</li>
            <li>Gallery #2</li>
        </ul>
    </li>
    <li>
        <a href="#">Albums</a>

        <ul>
            <li>Album #1</li>
            <li>Album #2</li>
        </ul>
    </li>
</ul>

CSS

ul.menu li ul {
    display:none;
}

ul.menu li:hover ul {
    display:block;
    position:relative;
}

Answer 2

你正在使用hide并显示错误。 http://api.jquery.com/show/ http://api.jquery.com/hide/

http://jsfiddle.net/eXKV9/

$('#top-menu').hover(
  function () {
    $('#submenu').show();
  },
  function () {
    $('#submenu').hide();
  }
);

Answer 3

id必须唯一。如果你有多个具有相同id的元素，当你执行$（'＃top-menu'）时，jquery将不会检索所有元素，它只会找到与选择器匹配的第一个元素。

Answer 4

我们需要稍微改变一下HTML。 ID仅在页面上使用一次。类类似，但可以应用于任意数量的元素。我们还想在顶层菜单下嵌套我们的子菜单。这种联系更清晰。

<li class="top-menu"><a href="#">About Us</a>
    <ul class="sub-menu non-active">
        <li>Ashley + David</li>
        <li>Our Style</li>
        <li>The Experience</li>
    </ul>
</li>

我们要指定要显示或隐藏的嵌套子菜单。 $(this)指的是悬停在上面的顶级菜单。

$('.top-menu').hover(
  function () {
    $(this).find('.sub-menu').show("slow");
  },
  function () {
    $(this).find('.sub-menu').hide("slow");
  }
);

demo

Answer 5

我更新了你的工作。这是试图建立的吗？

$('#top-menu').mouseover(function(){
    $('#submenu').addClass('active');
});
$('#top-menu').mouseout(function(){
    $('#submenu').removeClass('active');
});

JSFiddle Demo

子菜单的javascript悬停功能

5 个答案:

demo