web-dev-qa-db-ja.com

jQuery cookieがワードプレスで正しく機能しない

私はhtml + jqueryが自分のアコーディオンメニューを完璧に第4レベルまで機能させ、それから私はnetからクッキーコードを追加し、それがまたhtmlで完全に機能するいくつかの追加作業をします。

私の完全なHTML + jQueryコードのリファレンスは、クッキー付きのJS-Fiddle アコーディオンメニュー にあります。

今、私はそれを私のワードプレスメニューに非常に慎重にマージします、それは非常に奇妙なふるまいを示します。サブメニューが開いていてサブカテゴリをクリックしているときにページがそのカテゴリに移動したがメニューは閉じているが、再びサブメニューを開いてメニューをクリックしたりページを更新したりするとページが更新されます。私はなぜワードプレスでjqueryクッキーが機能しないのか心配でした。

これがjquery cookie + jqueryアコーディオンコードです。

jQuery(document).ready(function () {


   // baking cookie ;p
   function set_cookie(ID) {
         document.cookie = ID + "=opened";
   }

   // getting it out from the oven... ;)
   function get_cookies_array() {

       var cookies = {};

       if (document.cookie && document.cookie != '') {
          var split = document.cookie.split(';');
          for (var i = 0; i < split.length; i++) {
              var name_value = split[i].split("=");
              name_value[0] = name_value[0].replace(/^ /, '');
              cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
          }
       }

       return cookies;

   }

   // yuck... sorry i don't know how to cook :S
   function unset_cookie(cookie_name) {
        var cookie_date = new Date();
        cookie_date.setTime(cookie_date.getTime() - 1);
        document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
   }

   var tree_id = 0;
   jQuery('ul.b29-tree li:has(ul)').addClass('has-child').prepend('<span class="switch">+</span>').each(function () {
                    tree_id++;
                    jQuery(this).attr('id', 'tree' + tree_id);
                });
   // Accordion code
   jQuery('ul.b29-tree li > span.switch').click(function () {
            var tree_id = jQuery(this).parent().attr('id');
            if (jQuery(this).hasClass('open')) {
                        jQuery(this).parent().find('ul:first').slideUp('fast');
                        jQuery(this).removeClass('open');
                        jQuery(this).text('+');
                        unset_cookie(tree_id)
                    } else {
                        jQuery(this).parent().find('ul:first').slideDown('fast');
                        jQuery(this).text('-');
                        jQuery(this).addClass('open');
                        set_cookie(tree_id)

                    }
                });

                var cookies = get_cookies_array();
                for (var name in cookies) {
                    $('#' + name).find('> ul').css({'display' : 'block'});
                    $('#' + name).find('> span').addClass('open').text('-');
                }

            });

私は私のxampにwordpressで働いているので私はあなたにそのリンクを与えることはできませんがリンクの上はhtmlのデモです

menusjquerycookies
2
deemi-D-nadeem

OK、

私は@ TheDeadMedicの助けを借りてこれを解決します。私はwordpressのcookiepath定数を使っていて、それはwordpressで完璧に動作します。

これがjqueryのコードです。

jQuery(document).ready(function () {
                // baking cookie ;p
                function set_cookie(ID) {
                    document.cookie = ID + "=opened; path=<?php echo COOKIEPATH ?>";
                }

                // getting it out from the oven... 
                function get_cookies_array() {
                    var cookies = {};

                    if (document.cookie && document.cookie != '') {
                        var split = document.cookie.split(';');
                        for (var i = 0; i < split.length; i++) {
                            var name_value = split[i].split("=");
                            name_value[0] = name_value[0].replace(/^ /, '');
                            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
                        }
                    }
                    return cookies;
                }

                // yuck... sorry i don't know how to cook :S
                function unset_cookie(cookie_name) {
                    var cookie_date = new Date();
                    cookie_date.setTime(cookie_date.getTime() - 1);
                    document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString() + "; path=<?php echo COOKIEPATH ?>";
                }

                var tree_id = 0;
                jQuery('ul.wpc-categories li:has(ul)').addClass('has-child').prepend('<span class="switch"><img src="<?php echo plugin_dir_url(__FILE__); ?>/includes/css/images/icon-plus.png" /></span>').each(function () {
                    tree_id++;
                    jQuery(this).attr('id', 'tree' + tree_id);
                });

                jQuery('ul.wpc-categories li > span.switch').click(function () {
                    var tree_id = jQuery(this).parent().attr('id');
                    if (jQuery(this).hasClass('open')) {
                        jQuery(this).parent().find('ul:first').slideUp('fast');
                        jQuery(this).removeClass('open');
                        jQuery(this).html('<img src="<?php echo plugin_dir_url(__FILE__); ?>/includes/css/images/icon-plus.png" />');
                        unset_cookie(tree_id)
                    } else {
                        jQuery(this).parent().find('ul:first').slideDown('fast');
                        jQuery(this).html('<img src="<?php echo plugin_dir_url(__FILE__); ?>/includes/css/images/icon-minus.png" />');
                        jQuery(this).addClass('open');
                        set_cookie(tree_id)
                    }
                });

                var cookies = get_cookies_array();
                for (var name in cookies) {
                    jQuery('#' + name).find('> ul').css({'display' : 'block'});
                    jQuery('#' + name).find('> span').addClass('open').html('<img src="<?php echo plugin_dir_url(__FILE__); ?>/includes/css/images/icon-minus.png" />');
                }
            });
2
deemi-D-nadeem