0

私はjavascriptを理解しようとするのが初めてで、何が間違っているのかを理解しようとして複数の例をプールしてきましたが、これを正しく機能させることはできません. ある時点で onmouseover/mouseout を使用していましたが、1 つのメニューでしか機能しませんでした。

私が見落としていたのは単純なことだと確信していますが、どんな助けもいただければ幸いです。

http://jsfiddle.net/N3TyT/

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;
}
4

5 に答える 5

2

それはあなたの特定の質問に答えませんが、同じ振る舞いはcssで簡単に達成することができます。このようにして、標準のメニューアクセスでJavaScriptがオンになっていることに依存しません。

ul.menu li ul {
  display: none;
}

ul.menu li:hover ul {
  display: block;
  position: relative;
}
<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>

jsFiddleで表示

于 2013-03-09T09:05:25.167 に答える
1

非表示と表示の使い方が間違っています。 http://api.jquery.com/show/ http://api.jquery.com/hide/

http://jsfiddle.net/eXKV9/

$('#top-menu').hover(
  function () {
    $('#submenu').show();
  },
  function () {
    $('#submenu').hide();
  }
);
于 2013-03-09T08:57:09.277 に答える
1

id一意である必要があります。同じid.

于 2013-03-09T08:57:57.437 に答える
0

HTMLを少し変更する必要があります。IDは、ページで1回だけ使用されます。クラスは似ていますが、任意の数の要素に適用できます。また、サブメニューをトップメニューの下にネストしたいと思います。そうすれば、関連付けがより明確になります。

<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");
  }
);

デモ

于 2013-03-09T09:17:11.810 に答える
-1

あなたの作品を更新しました。これは確立しようとしているものですか？

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

JSFiddleデモ

于 2013-03-09T09:03:38.023 に答える