1

6 つの要素またはメイン カテゴリを含むメイン メニューがあります。これらのメイン メニューにカーソルを合わせると、サブ メニューまたはカテゴリが表示されます。

http://newiagaadvisors.advisorproducts.com/home

私の要件は次のようになります。

誰かが写真をクリックしたときに、サブメニューまたはカテゴリを選択肢として表示することも可能です。同じように、メイン メニューにカーソルを合わせると、サブカテゴリまたはメニューが表示されますか?

誰かが画像をクリックしたときのクリックイベントで同じメニューホバー機能が必要です

以下は、ホバー イベントのメイン メニュー ドロップダウンの jquery コードです。

$(function()
{
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
4

4 に答える 4

1

次のようなことを試してください：

var images = $('#banner img'),
    menuItems = $('.dropdown.sub-menu > li');

images.click(function(){
    var index = images.index(this);

    var li = menuItems.eq(index),
        sublist = li.find('ul:first');

    if(sublist.length)
    {
        li.addClass("hover");
        sublist.css('visibility', 'visible').show();
    }
});
于 2012-10-29T11:20:49.817 に答える
0

同じ関数を別のリスナーに追加しても問題ありません。

于 2012-10-29T10:52:15.663 に答える
0

ナビゲーション li を on mouseenter と on mouseleave にバインドします (これはとにかく舞台裏で hover() が行っていることです):

$("ul.dropdown li").on('mouseenter', function() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}).on('mouseleave', function() {
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
});

次に、何らかの方法で 2 つ (つまり、img とナビゲーション li) を接続する必要があります。たとえば、havingと対応する画像 (タグ) havingidの両方に属性があるとします。次に、画像のクリックを次のようにバインドできます。liid="news-info"imgid="img-news-info

$("#banner img").on('click', function() {
    var navId = $(this).attr('id').substring(4);
    $("#"+navId+"").mouseenter();
});
于 2012-10-29T11:25:00.667 に答える
0

を使用しますが、 bind はhoverbind()と互換性がないため、代わりにandを使用できます。ホバーは、これら 2 つのハンドラーのショートカットであることに注意してください。mouseentermouseleave

  $("ul.dropdown li").bind( {
        'mouseenter' : function(){
          $(this).addClass("hover");
          $('ul:first',this).css('visibility', 'visible');
        }, 
        'mouseleave': function()
        {
          $(this).removeClass("hover");
          $('ul:first',this).css('visibility', 'hidden');
        },
        'click': function()
        {
          if( $(this).hasClass("hover") ){
            $(this).removeClass("hover");
            $('ul:first',this).css('visibility', 'hidden');
          } else {
            $(this).addClass("hover");
            $('ul:first',this).css('visibility', 'visible');
          }
        }
      });
于 2012-10-29T11:02:28.400 に答える