5

CSS で設定された div に CSS メニューがあります。ページの読み込み時。

私はこのhtmlを持っています:

<a class="show_menu">Show Menu</a>
<a class="hide_menu" style="display:none;">Hide Menu</a>

<div id="nav" style="display:none;">
div content here
</div

そしてこのJQUERY：

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
});
</script>

divが表示または非表示になっているときにCookieを表示する最良の方法は何ですか?ユーザーがページを変更すると、メニューが開いている場合は別のページで開いたままになり、メニューを閉じると他のすべてのページが閉じます彼らが再び開くまでページ？

編集：ここに私の新しいコードがあります

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

<script>
var menu_state = $.cookie('mydomain_menuflag');
alert(menu_state);
if(menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;
</script>

<div class="show_menu"><a>Show Menu</a></div>
<div class="hide_menu" style="display:none;"><a>Hide Menu</a></div>

<div id="nav" style="display:none;">
<li><a href="/admin/index.php">Dashboard</a></li>
<li><a>Contacts</a>
    <ul>
    <li><strong>Companies</strong></li>
    <li><a href="/admin/index.php?id=customer/addcustomer">Add Company</a></li>
    <li><a href="/admin/index.php?id=customer/viewcustomer">View Company</a></li>
    <li><strong>Contacts</strong></li>
    <li><a href="/admin/index.php?id=contacts/addcontact">Add Contact</a></li>
    <li><a href="/admin/index.php?id=contacts/viewcontact">View Contact</a></li>
    <li><strong>Resellers</strong></li>
    <li><a href="/admin/index.php?id=reseller/addreseller">Add Reseller</a></li>
    <li><a href="/admin/index.php?id=reseller/viewreseller">View Reseller</a></li>
    <li><strong>Salesman</strong></li>
    <li><a href="/admin/index.php?id=salesman/addsalesman">Add Salesman</a></li>
    <li><a href="/admin/index.php?id=salesman/viewsalesman">View Salesman</a></li>
    </ul>
</li>
<li><a>Customer Info</a>
    <ul>
    <li><a href="/admin/index.php?id=customer/commsone-phonelines">Comms One Phone Lines</a></li>
    </ul>
</li>

</div>

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
   $.cookie('mydomain_menuflag', 'visible');
   var menu_state = $.cookie('mydomain_menuflag');
   alert(menu_state);
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
   $.cookie('mydomain_menuflag', 'hidden');
});
</script>
4

1 に答える 1

1

このライブラリを試してください: https://github.com/carhartl/jquery-cookie

show イベント関数で Cookie を設定します。

$.cookie('mydomain_menuflag', 'visible');

非表示:

$.cookie('mydomain_menuflag', 'hidden');

そしてドキュメントの読み込みで最初のチェックを行います

var menu_state = $.cookie('mydomain_menuflag');
if( typeof menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;

私はテストしていないので、バグを残した場合はお知らせください。

編集：

これを行う必要があるコード全体は次のとおりです。

<script type = "text/javascript">

$( document ).ready(function() {

  // setup the initial display on page load
  var menu_state = $.cookie('mydomain_menuflag');

  if( typeof menu_state !== "undefined" && menu_state == "visible" ) {
    $('#nav').show; // visible, and cookie is set
  } else {
    $('#nav').hide; // hidden or cookie is not set, set just in case
    $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
  }

  // listen for the clicks
  $('.show_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'visible'); // update (or set) the cookie
     $("#page_cont").css("width", "80%");
     $(".hide_menu").css("display", "block");
     $(".show_menu").css("display", "none");
  });
  $('.hide_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
     $("#page_cont").css("width", "100%");
     $(".hide_menu").css("display", "none");
     $(".show_menu").css("display", "block");
  });

});

</script>

head タグ内に次の行を追加します。<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

私は通常、ライブラリのローカル コピーをダウンロードしてリンクすることをお勧めしますが、上記の方法で、最初から起動して実行することができます。

編集2：

ここに実用的なフィドルがあります: http://jsfiddle.net/YZenq/1/

注: JSFiddle はWeb ページと同じではありません。

  1. フィドルは、コードがそれを処理するため、準備が整ったドキュメントを必要としません。あなたのページはそれを使用する必要がありますが、すべてのコードを複数ではなく 1 つの中に入れてください。
  2. フィドルではドキュメント ヘッドを変更できません ( <head> ... </head>)。フィドルの左側には、リンクを提供したライブラリと同じことを行うための外部リソース オプションがあります。フィドルでは、URL (つまり、script タグの src 属性内のコード) を入力します。ただし、スクリプト タグ全体 (ライブラリにリンクする小さい方) を head タグのすぐ内側に追加する必要があります。

それは理にかなっていますか？

編集3：

複数の Cookie インスタンスの設定を停止する変更を加えて更新されたフィドル: http://jsfiddle.net/YZenq/2/

于 2013-06-17T23:20:40.007 に答える