2017-05-22 10 views
0

をリロードすると、私のコードです...はJQuery、トグル/アコーディオンメニューの問題こちらのページ

var menuToggle = false; 

$(document).ready(function() { 
// Init Tabs 
$("#ipsg-tabs").tabs(); 

// Init Tooltips 
$(function() { 
    $('.ipsg-tab').tooltip(); 
});; 

// Init Menu 
accordionMenu(); 

// Toggle Menu 
$('.ipsg-logo-menu-btn').click(function() { 
    if (!menuToggle) { 
     menuToggle = true; 
     $('.sg-accordion > .ipsg-nav-items').hide(); 
     $('.sg-accordion h3').removeClass('state-selected'); 
     $('.ipsg-container').addClass('ipsg-menu-collapse'); 
    } else { 
     menuToggle = false; 
     $('.ipsg-container').removeClass('ipsg-menu-collapse'); 
    } 
}); 

}); 

function accordionMenu() { 
var allPanels = $('.sg-accordion > .ipsg-nav-items');  
var menuLeaving = false; 
$('.sg-accordion > h3 > a').click(function() { 
    if (!menuToggle) { 
     if (!$(this).parent().hasClass('state-selected')) { 
      allPanels.slideUp('fast'); 
      $('.sg-accordion h3').removeClass('state-selected'); 

      $(this).parent().next().slideDown('fast'); 
      $(this).parent().addClass('state-selected'); 
     } else { 
      allPanels.slideUp('fast'); 
      $('.sg-accordion h3').removeClass('state-selected'); 
     } 
    } 

    return false; 
}); 

$('.sg-accordion > h3 > a').mouseenter(function() { 
    if (menuToggle) { 
     menuLeaving = false; 
     $('.sg-accordion > .ipsg-nav-items').hide(); 
     $('.sg-accordion h3').removeClass('state-selected'); 
     $(this).parent().next().show(); 
     $(this).parent().addClass('state-selected'); 
    } 
}); 

$('.sg-accordion > .ipsg-nav-items').mouseenter(function() { 
    if (menuToggle) { 
     menuLeaving = false; 
    } 
}); 

$('.sg-accordion > h3 > a').mouseleave(function() { 
    if (menuToggle) { 
     menuLeaving = true; 

     setTimeout(function() { 
      if (menuLeaving) { 
       $('.sg-accordion > .ipsg-nav-items').hide(); 
       $('.sg-accordion h3').removeClass('state-selected'); 
      } 
     }, 400); 
    } 
}); 

$('.sg-accordion > .ipsg-nav-items').mouseleave(function() { 
    if (menuToggle) { 
     menuLeaving = true; 

     setTimeout(function() { 
      if (menuLeaving) { 
       $('.sg-accordion > .ipsg-nav-items').hide(); 
       $('.sg-accordion h3').removeClass('state-selected'); 
      } 
     }, 400); 
    } 
}); 
} 

私は私のトグルメニューが閉じていたり、ページのリロードに応じてオープンしようとしています。だから、もし私がハンバーガーメニューを使用していて、リンクをクリックすれば、リロード後にハンバーガーメニューを残しておきたい。メニューを開いているのと同じですが、リンクをクリックすると、メニューがリロードされたままになります。

誰にでもアイデアがありますか?

+0

であるあなたがこれを処理するために、バックエンドの言語を使用することができる方法はありますか? javascript/jQueryは通常、変更する前にメニューが開いているか閉じているかの「フラッシュ」の瞬間になります。バックエンド言語を使用すると、既に開いているメニューのコードを渡すことができます。 –

+0

私はバックエンドで.netを使用しています。これを実行する方法を正確にはわかりません:/ –

+0

残念ながら.netでの私の経験の合計は1つのインターンシップなので、それは、( '__doPostBack')(https://forums.asp.net/post/2313345.aspx)を使って(おそらくメニュー項目のクリックイベントから)バックエンドにデータを送ることができるように聞こえますが、ユーザーのセッションに保存するか、データをフラッシュして後で参照して、アクティブなクラスをメニューまたはメニュー項目に追加することができます。そのクラスは、フレームワークがメニューを開くために使用するものを単純に模倣します。 –

答えて

0

これは、私がlocalStorageまたはcookieを使用するようなものです。いずれかの変数を設定すると、メニューを開いたり閉じたりするときに指示することができます。

0

質問済み。クッキーは、実装および保守が容易なので、クッキーを使用することができます。
リンクはこちらJquery UI Accordion menu saving menu state even after refresh

+0

私はそのコードをどのように実装するのですか? –

+0

いくつかのコードを追加できるようにあなたのHTMLコードも提供できますか? – breakit

+0

コードはちょうどipsg-logo-menu-btnクラスを呼び出しています...

メニューはリンク付きのドロップダウンメニューですが、ハンバーガーメニューをクリックするとドロップダウンメニューが表示されますサイドアイコンナビに切り替える –

関連する問題