2

WebサイトにCSSドロップダウンメニューがあります。上部に親カテゴリのリストがあります。1つにカーソルを合わせると、ドロップダウンメニューが表示され、子カテゴリの1つをクリックできます。

子カテゴリをクリックすると、ajaxページの読み込みがトリガーされ、ページのコンテンツが置き換えられます。うまく機能します。

ただし、問題は、ページが再読み込みされないため、ドロップダウンメニューがまだ表示されていることです。マウスを離すには、マウスを離す必要があります。これは迷惑です。子カテゴリをクリックするとメニューが消えるようにします。タッチデバイスでは、この動作はさらに厄介です。

ここにコードを投稿するのではなく、次のWebサイトへのリンクを配置します。http：//tinyurl.com/blvtlwz 問題のメニューは、一番上にあるメニューです-「競技用馬」「レジャー用馬」など。

クリックが検出されたときにホバー状態をクリアする方法、またはメニューを処理するためのより良い方法についてのアイデアに興味がありますか？私はjqueryremoveClass（）をいじりましたが、あまり運がありませんでした。

ありがとう

4

3 に答える 3

1

このスクリプトで試すことができます：

 $(function(){
   $('#nav li').hover(function() {
     $('ul',this).show(); // this will show the hidden ul
   });
  $('#nav li ul li').click(function() {
     $(this).parent().hide().end(); // this will hide the ul
  });
});
于 2012-12-28T11:46:00.927 に答える
1

.clickの代わりに.onを使用できます

// This might need some tweeking for it to work on your end
$('#nav li').on("click", function(e){
  $('#nav li').hide();
});

// When you are scrolled down a bit and click a top menu link (eg 'Competition Horses') you will "jump to top". This will prevent that.
$('#nav ul li a').on("click", function(e){
  e.preventDefault();
});
于 2012-12-28T12:07:50.550 に答える
0 
$(document).ready(function() {
$('#nav li ul li').click(function() {
    $(this).parent().fadeOut();
    return false; // comment this to allow propagaton to new page
});
$('#nav li ul li').hover(function() {
 $(this).parent().fadeIn(); 
 });
});​

デモを見る

于 2012-12-28T11:56:33.710 に答える