2

すべてのリンクが表示されるhttp://www.macheesmo.com/ (レシピ)のようなメニューを作成したかった(3 レベルの深さ)。

これは私がこれまでに思いついたことです - http://jsfiddle.net/MZxeA/

私の問題は、3 番目の ul を離れるたびに、サブ メニュー全体が消えることです。

もう 1 つの問題は、2 番目の UL を入力してから最初の UL に戻ると、3 番目の UL が消えてしまうことです。

別の問題はセレクターにあり、a を削除しない限り機能しません。

a を含めたかった理由は、ホバー/トレイルに「オン」スタイルを持たせるためです。

$(function () {
    $(".main-nav ol li a").hover(function () {
        $(this).addClass("hover");
        $('ul', this).css({
            'visibility': 'visible'
        });
    }, function () {
        $(this).removeClass("hover");
        $('ul', this).css({
            'visibility': 'hidden'
        });
    });
});

どんな助けでも大歓迎です、ありがとう！

4

2 に答える 2

0

コメントで指摘されているように、これを行う方法は JavaScript を除外し、CSS を使用することです (コピーしようとしているサンプル サイトのように)。

基本的に、レベル 1 ～ 3 の 3 つのネストされたリストがあり、デフォルトではレベル 1 のみが表示されます。これは、スタイルがどのように機能するかのおもちゃの例です。

HTML:

<ul id="menu">
  <li>
    <a href="#">Item 1</a>
    <ul>
      <li>
        Sub item1
        <ul>
          <li>Third level items go here</li>
        </ul>
      </li>
      <li>Sub item without third level items..</li>
    </ul>
  </li>
  <li><a href="#">Item 2, no submenu</a></li>
</ul>

CSS:

/* Hide the submenu by default */
#menu > li > ul {
  display:none;
}

/* Show on parent hover */
#menu > li:hover > ul {
  display:block;
}

これは非常に基本的な HTML/CSS であり、この演習の show hide 部分のみを示していますが、残りはとにかく質問に実際には関係ありません。

なんらかの理由で本当に jQuery を使用したい場合は、上記の 2 番目のスタイル ルールを削除し、このスクリプトを使用して同じ効果を得ることができます。

$(document).ready(function(){
  $('#menu > li').hover(function(){
    $(this).children('ul').show();
  }, function(){
    $(this).children('ul').hide();
  });
});
于 2013-02-05T09:13:19.860 に答える
0

あなたがjsfiddleで行ったことにはいくつかの間違いがありました。私はあなたと一緒にそれを1つずつ修正しようとします

  1. まず、コードに jquery ファイルを含める必要があります。jquery ヘルプを使用してコードを記述します。jqueryファイルを含めるには、jqueryのローカルファイルとこのコードを使用できます
<script src="local/jquery.min.js" />

  1. サブメニューの位置を絶対にする必要があります。そして、li は彼を position:relative に保持します。彼の父親に関連するサブを作成し、上と左の値でサブメニューを必要な場所に配置します。

  2. 目に見えるオプションでは、使用するいくつかの問題があります。サブメニューの jquery には、たとえば show() および hide() オプションを指定します。このコードでは、作業を行うための短くて優れたコードを見ることができます

$(function () {
    $(".main-nav ol li a").hover(function () {
        $(this).addClass("hover");
        $(this).next('ul').show();
    }, function () {
        $(this).removeClass("hover");
        $(this).next('ul').hide();
    });
});

必要に応じて、show() と hide() を fadeOut() と fadeIn() に置き換えて、トランジションを行うこともできます。

喜んでお手伝いします

于 2013-02-05T08:53:13.107 に答える