web-dev-qa-db-fra.com

le cookie jQuery ne fonctionne pas correctement dans wordpress

Je crée mon propre menu accordéon avec html + jquery, il fonctionne parfaitement au niveau suivant, puis j’ajoute un code de cookie sur le réseau et je fais un travail supplémentaire. Il fonctionne également à 100% parfaitement en html.

Ma référence complète au code HTML + jQuery est dans JS-Fiddle Menu accordéon avec cookie

Maintenant, je le fusionne très soigneusement dans mon menu wordpress, il montre un comportement très étrange. Lorsque je clique sur plus les sous-menus sont ouverts et que je clique sur la sous-catégorie la page va à cette catégorie mais le menu est fermé mais quand j'ouvre encore le sous-menu et clique sur le menu ou actualise la page son travail. Je me demandais pourquoi dans WordPress le cookie JQuery ne fonctionnait pas.

Voici le cookie jquery + le code accordéon 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('-');
                }

            });

Je travaille dans wordpress sur mon xamp donc je ne peux pas vous donner ce lien mais le lien ci-dessus est la démo de HTML

menusjquerycookies
2
deemi-D-nadeem

D'accord,

Je résous cela avec l'aide de l'aide de @ TheDeadMedic. J'utilise wordpress cookiepath constante et cela fonctionne parfaitement sur wordpress.

Voici le code 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