0

<li>カーソルを合わせると、サブメニューを含むパネルが下にスライドするメニューがあります。（修正済み）次に、どのメニュー項目にカーソルを合わせるかによって変化するコンテンツをそのサブメニューに入力する必要があります。（修正済み）

最後の問題：コンテンツを変更できるのは、.hoverの代わりに.clickを使用した場合のみです...-同じ要素で2 x .hoverを使用する際の問題はありますか？

<html>
[.......]
<body>

    <div id="head_menu">
      <div id="navmain">
        <ul>
          <li id="menu1"><a class="open" href="#">Menu 1</a></li>
          <li id="menu2"><a class="open" href="#">Menu 2</a></li>
        </ul>
      </div>
    </div>
    <div id="toppanel">
    <div id="panel">
      <div id="subcontent_wrap">

        <div id="submenu1" style="display:none;">
          <div class="subcontent_container">
            <h1>Head</h1>
            <p>content </p>
          </div>
          <div class="subcontent_container">more content</div>
        </div>

        <div id="submenu2" style="display:none;">
          <div class="subcontent_container">
            <h1>Head</h1>
            <p>content </p>
          </div>
          <div class="subcontent_container">more content</div>
        </div>
      </div>
    </div>

<script>


var slideOpen = false;
var toggling = false;
function slidein() {
 clearTimeout(toggling);
 if (!slideOpen)
       $("#panel").slideDown("fast");
 else
   $("#panel").show();
 slideOpen = true;
 $(this).addClass("active");
 return false;
}
function slideout() {
 if (!slideOpen)
       $("#panel").hide();
 else
   $("#panel").slideUp("fast");
 slideOpen = false;
 $(this).removeClass("active");
 return false;
}
function unhover() {
 clearTimeout(toggling);
 toggling = setTimeout(slideout, 300);
}

$(".open").hover(slidein, unhover);



$(function () {
    $("#navmain li").click(function () {
        var $this = $(this);
        $("#subcontent_wrap div").hide();
        $("#submenu" + $this.attr("id").replace(/menu/, "")).show();
        $("#navmain li").css("font-weight", "normal");
        $this.css("font-weight", "bold");
    });
});
</script>

</body>
</html>
4

3 に答える 3

1

.hoverイベントを使用する場合、フォーマットは次のように行う必要があると思います。

function border() {
$('ELEMENT').hover(function () {
        $(this).stop().animate({height:"290"},200) },

function () {
        $(this).stop().animate({height:"150"},200)
     });
};

この形式を使用すると、関数をプラグインして、ホバーをホバリンとホバアウトで動作させることができるはずです。他に質問がないかどうか、この投稿を監視します。これがお役に立てば幸いです。

于 2009-10-15T13:15:54.693 に答える
1

まず、id とクラスを正しく使用して、html マークアップを修正します。

Id は一意の識別子であり、同じ HTML ドキュメントで複数回使用することはできません。そのためにクラス属性を使用します。これまでの例では<div id="subcontent_container"> 、<div class="subcontent_container">

それが完了したら、新しい html コードで質問を更新してください。次のステップの指示で回答を更新します。

于 2009-10-15T11:02:35.873 に答える
1

ユーザーが LI をホバリングしなくなったときにメニューを非表示にするコールバック状態があるため、onmouseover/onmouseout を使用したほうがよいでしょう。

// this will only work for hover
// you will need a separate binding on the A tag to make
// the panel stick
$('#navmain li').mouseover(function() {
    var id = $(this).attr('id');
    var subId = 'sub' + id;
    // show the sub menu
    $(subId).fadeIn(1, function() {
        // slide down top panel
        $('#toppanel').slideDown('fast');
    });
}, 
// this callback refers to the onmouseout state
function() {
    // hide the top panel
    $('#toppanel').slideUp('fast', function() {
        // hide content again
        $(subId).hide();
    });
});

また、一般的に、LI タグ内にネストされたリストとして第 2 レベルのナビゲーションをネストすることをお勧めします。これにより、マウスオーバー状態を、新しく表示されたパネル コードの上に移動できるようになります (これは LI の子であるため、残念ながら、ネストされた UL で CSS のスタイル変更と絶対配置が必要になりますが、IMO は努力する価値があります。

<div id="head_menu">
  <div id="navmain">
    <ul>
      <li id="menu1">
        <a class="open" href="#">Menu 1</a>
        <ul style="display:none">
          <li>
            <div id="submenu1" style="display:none;">
              <div class="subcontent_container">
                <h1>Head</h1>
                <p>content </p>
              </div>
              <div class="subcontent_container">more content</div>
            </div>
          </li>
        </ul>
      </li>
      <li id="menu2">
        <a class="open" href="#">Menu 2</a>
        <ul style="display:none">
          <li>
            <div id="submenu2" style="display:none;">
              <div class="subcontent_container">
                <h1>Head</h1>
                <p>content </p>
              </div>
              <div class="subcontent_container">more content</div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

jQuery を簡素化し、不要なタグを減らすという追加の利点があります。

// this version coupled with the above HTML changes
// will allow the UL panel to remain open until
// you mouse out
$('#navmain li').mouseover(function() {
    $(this).find('ul').slideDown('fast');
}, 
// this callback refers to the onmouseout state
function() {
    $(this).find('ul').slideUp('fast');
});
于 2009-10-15T12:40:22.097 に答える