Expand /Collapse menu sa ramana activ dupa click.. help

Salut,

Am rugamintea daca ma poate ajuta cineva in legatura cu un plugin de wordpress, mai exact un meniu din sidebar care are functia de Expand /Collapse ... tree nav etc.

Problema este ca acesta nu ramane deschis si activ dupa ce ai dat click pe una din pagini, sincer nu stiu cum sa rezolv acest lucru si sper sa ma ajutati.

Aici gasiti meniul cu problema, cel cu titlu proiecte: din pacate nu am voie sa postez link aici pentru ca nu am 30 zile de cand sunt membru, scrieti eventual sykadesign. ro ca sa vedeti meniul in actiune.

Am sa pun mai jos continutul pluginului, este structurat astfel:

../css/style.css
../css/rtl.css
../js/codes.js
wpp-tree.php


1.wpp-tree.php

Cod PHP:

---

jQuery(document).ready(function(){


    jQuery('#wb_tree ul li').has('#wb_tree ul.sub-menu').prepend('<span>+</span>');
    jQuery('#wb_tree ul ul').hide();
    
    jQuery('#wb_tree span').click(
    function(){
    
       
    }).toggle(
       function(){
              jQuery(this).text('-');
              
              var parent = jQuery(this).parent();
              jQuery(parent).find('>ul').slideToggle();
       },
       function(){
              jQuery(this).text('+');
              var parent = jQuery(this).parent();
              jQuery(parent).find('>ul').slideToggle();
       }
    );
    
    jQuery("li:contains('+')").css("background-image", "none")


}); 


---

2. ../js/codes.js

Cod:

---

jQuery(document).ready(function(){


        jQuery('#wb_tree ul li').has('#wb_tree ul.sub-menu').prepend('<span>+</span>');
        jQuery('#wb_tree ul ul').hide();
       
    jQuery('#wb_tree span').click(
    function(){
   
         
    }).toggle(
      function(){
                  jQuery(this).text('-');
                 
                  var parent = jQuery(this).parent();
                  jQuery(parent).find('>ul').slideToggle();
      },
      function(){
                  jQuery(this).text('+');
                  var parent = jQuery(this).parent();
                  jQuery(parent).find('>ul').slideToggle();
      }
    );
   
    jQuery("li:contains('+')").css("background-image", "none")


});

---

3. ../css/rtl.css

Cod:

---

#wb_tree span{
  margin-left: 3px;
}
#wb_tree ul li{
  margin-right: 10px;
}
#wb_tree ul ul{
  margin-right: 10px;
}
#wb_tree ul ul li{
  background-position: right;
  padding-right: 5px;
}

---

4. ../css/style.css

Cod:

---

#wb_tree span{
  border: 1px solid #d7d7d7;
  padding: 0 3px;
  margin-right: 3px;
  cursor: pointer;
  color:#595959;
}
#wb_tree ul{
        list-style: none;
}
#wb_tree ul li{
  margin-left: 0px; font-size:13px; font-weight:bold;
}
#wb_tree ul ul{
  margin-left: 10px;
}
#wb_tree ul ul li{
  background-image: url(li-b.png);
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 10px;
  margin-left: 0px; font-size:12px; font-weight:normal;
}

---

Multumesc

Salut.

Nu lucrez cu wordpress și nu prea te pot ajuta având în vedere că e vorba de un cms.

Mă rog, ideea e că acel cod javascript nu este decât animația / efectul meniului.

Scripturile de genul ăsta se fac în doua moduri.

1. Prin accesarea unui link care are o valoare în get sau un formular cu post care îți schimbă pagina și setează un cookie sau o sesiune utilizatorului.

2. Metoda modernă se face folosind ajax cu aceeași salvare pentru un cookie sau o sesiune. Astfel meniul rămâne strâns sau nu prin verificarea cookie-ului.

Metoda folosită ar trebui să fie prin ajax având în vedere că există o animatie și un fișier php, dar tu n-ai pus tot codul javascript.

Ca să nu mai zic de cel php care e de fapt javascript.

Tu trebuie să verifici cum se ajunge la scriptul php. Dacă se ajunge la codul php prin apăsarea butonului atunci verifici ce conține codul și dacă se salvează ceva - undeva.

Salut, mersi pentru raspuns, nu stiu de ce nu s-a postat tot codul.. il mai postez odata poate imi poti da totusi un sfat de start, un link ceva de unde sa ma documentez.

wpp-tree.php

Cod PHP:

---

<?php


    
///////////////////////////////////////// Style & JS  /////////////////////////////////////////

function wb_treev_js_to_head()
{
    echo '<link rel="stylesheet" href="'.get_settings('siteurl').'/wp-content/plugins/wp-parsi-navigation-trees/css/style.css" type="text/css" media="screen" />'."\n";
    echo '<script type="text/javascript" src="'.get_settings('siteurl').'/wp-content/plugins/wp-parsi-navigation-trees/js/codes.js"></script>'."\n";
    
}
add_action('wp_head', 'wb_treev_js_to_head');


///////////////////////////////////////// Main Class  /////////////////////////////////////////

//error_reporting(E_ALL);
add_action("widgets_init", array('Widget_Tree_Nav', 'register'));
register_activation_hook( __FILE__, array('Widget_Tree_Nav', 'activate'));
register_deactivation_hook( __FILE__, array('Widget_Tree_Nav', 'deactivate'));
class Widget_Tree_Nav {
    
    
    
    
  function activate(){
    $data = array( 'treev_option' => '');
    if ( ! get_option('widget_tree_nav')){
      add_option('widget_tree_nav' , $data);
    } else {
      update_option('widget_tree_nav' , $data);
    }
  }
  
  
  /////////////////////
  function deactivate(){
    delete_option('widget_tree_nav');
  }
  
  /////////////////////
function control(){
  $data = get_option('widget_tree_nav');


      global $wpdb, $table_prefix;
      $nav_menu_term_id = $wpdb->get_col("SELECT term_id FROM {$table_prefix}term_taxonomy WHERE taxonomy = 'nav_menu'");
      
      echo '<select name="widget_nav_option">';
      foreach($nav_menu_term_id as $n_m_term_id){
           $nav_menu_name    = $wpdb->get_col("SELECT name FROM {$table_prefix}terms WHERE term_id = $n_m_term_id");
           
           foreach($nav_menu_name as $n_m_name){
                if ($data['treev_option'] == $n_m_term_id){ $selected = ' selected="selected"'; } else {$selected = '';}
                $nav_dlist = "<option value=".$n_m_term_id."".$selected.">".$n_m_name."</option>";
                echo $nav_dlist;
           }//foreach child
      
      }//foreach
      echo '</select>';
  ?>
  
  <?php
   if (isset($_POST['widget_nav_option'])){
    $data['treev_option'] = attribute_escape($_POST['widget_nav_option']);
    update_option('widget_tree_nav', $data);
  }
}


  /////////////////////
  function widget($args){
      $data = get_option('widget_tree_nav');
    echo '<div id="wb_tree">';
     wp_nav_menu( array ('menu' => $data['treev_option']) );
    echo '</div>';
  }
  
  /////////////////////
  function register(){
    register_sidebar_widget('WPP-Tree', array('Widget_Tree_Nav', 'widget'));
    register_widget_control('WPP-Tree', array('Widget_Tree_Nav', 'control'));
  }
}


?>

---

codes.js

Cod:

---

jQuery(document).ready(function(){


        jQuery('#wb_tree ul li').has('#wb_tree ul.sub-menu').prepend('<span>+</span>');
        jQuery('#wb_tree ul ul').hide();
       
    jQuery('#wb_tree span').click(
    function(){
   
         
    }).toggle(
      function(){
                  jQuery(this).text('-');
                 
                  var parent = jQuery(this).parent();
                  jQuery(parent).find('>ul').slideToggle();
      },
      function(){
                  jQuery(this).text('+');
                  var parent = jQuery(this).parent();
                  jQuery(parent).find('>ul').slideToggle();
      }
    );
   
    jQuery("li:contains('+')").css("background-image", "none")


});

---

style.css

Cod:

---

#wb_tree span{
  border: 1px solid #d7d7d7;
  padding: 0 3px;
  margin-right: 3px;
  cursor: pointer;
  color:#595959;
}
#wb_tree ul{
        list-style: none;
}
#wb_tree ul li{
  margin-left: 0px; font-size:13px; font-weight:bold;
}
#wb_tree ul ul{
  margin-left: 10px;
}
#wb_tree ul ul li{
  background-image: url(li-b.png);
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 10px;
  margin-left: 0px; font-size:12px; font-weight:normal;
}

---

Fisier js

Cod:

---

function SDMenu(id) {
        if (!document.getElementById || !document.getElementsByTagName)
                return false;
        this.menu = document.getElementById(id);
        this.submenus = this.menu.getElementsByTagName("div");
        this.remember = true;
        this.speed = 3;
        this.markCurrent = true;
        this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
        var mainInstance = this;
        for (var i = 0; i < this.submenus.length; i++)
                this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
                        mainInstance.toggleMenu(this.parentNode);
                };
        if (this.markCurrent) {
                var links = this.menu.getElementsByTagName("a");
                for (var i = 0; i < links.length; i++)
                        if (links[i].href == document.location.href) {
                                links[i].className = "current";
                                break;
                        }
        }
        if (this.remember) {
                var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
                var match = regex.exec(document.cookie);
                if (match) {
                        var states = match[1].split("");
                        for (var i = 0; i < states.length; i++)
                                this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
                }
        }
};
SDMenu.prototype.toggleMenu = function(submenu) {
        if (submenu.className == "collapsed")
                this.expandMenu(submenu);
        else
                this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
        var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
        var links = submenu.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++)
                fullHeight += links[i].offsetHeight;
        var moveBy = Math.round(this.speed * links.length);
       
        var mainInstance = this;
        var intId = setInterval(function() {
                var curHeight = submenu.offsetHeight;
                var newHeight = curHeight + moveBy;
                if (newHeight < fullHeight)
                        submenu.style.height = newHeight + "px";
                else {
                        clearInterval(intId);
                        submenu.style.height = "";
                        submenu.className = "";
                        mainInstance.memorize();
                }
        }, 30);
        this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
        var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
        var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
        var mainInstance = this;
        var intId = setInterval(function() {
                var curHeight = submenu.offsetHeight;
                var newHeight = curHeight - moveBy;
                if (newHeight > minHeight)
                        submenu.style.height = newHeight + "px";
                else {
                        clearInterval(intId);
                        submenu.style.height = "";
                        submenu.className = "collapsed";
                        mainInstance.memorize();
                }
        }, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
        if (this.oneSmOnly) {
                for (var i = 0; i < this.submenus.length; i++)
                        if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
                                this.collapseMenu(this.submenus[i]);
        }
};
SDMenu.prototype.expandAll = function() {
        var oldOneSmOnly = this.oneSmOnly;
        this.oneSmOnly = false;
        for (var i = 0; i < this.submenus.length; i++)
                if (this.submenus[i].className == "collapsed")
                        this.expandMenu(this.submenus[i]);
        this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
        for (var i = 0; i < this.submenus.length; i++)
                if (this.submenus[i].className != "collapsed")
                        this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
        if (this.remember) {
                var states = new Array();
                for (var i = 0; i < this.submenus.length; i++)
                        states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
                var d = new Date();
                d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
                document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
        }
};

---

Pagina cu meniul

In <head></head>

<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>


Cod meniu:

Cod:

---

<div style="float: left" id="my_menu" class="sdmenu">

        <div>
            <span>Submeniu 1</span>
                <a href="http://forum.seopedia.ro/client-side/..."><span>Link 1</span></a>
                    <a href="http://forum.seopedia.ro/client-side/..."><span>Link 2</span></a>
                .......
        </div>

        <div>
            <span>Submeniu 2</span>
                <a href="http://forum.seopedia.ro/client-side/..."><span>Link 1</span></a>
                    <a href="http://forum.seopedia.ro/client-side/..."><span>Link 2</span></a>
                .......
        </div>
</div>

---

Se pastreaza memorate (in cookie) meniurile / submeniurile deschise chiar si dupa inchiderea browserului