# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن > jQuery >  چگونگی ایجاد ساختار، منوی درختی در جی کوئری

## mo_mokh_com1

سلام و خسته نباشید، من یه منوی درختی برای محصولات یه سایت لازم دارم !!!
اطلاعاتم رو با php به طور سالم و دقیق گرفتم .
حالا میخام توسط جی کوئری اونها رو نشون بدم که دیگه refresh نشه برای کلیک کردن روی هر محصول. 
خواهشا کمکم کنید ، برنامه ای برای این کار وجود نداره ؟ !!!!!!!!!!  :گریه:

----------


## mehdi.mousavi

> سلام و خسته نباشید، من یه منوی درختی برای محصولات یه سایت لازم دارم !!!


سلام.
ببینید این TreeView کارتون رو راه میندازه.
اگر خوشتون اومد، Source اش رو میتونید از اینجا دریافت کنید.

موفق باشید.

----------


## mahsa.n

نحوه راست چین کردنش چه جوریه؟؟؟؟؟؟؟؟؟؟؟

----------


## pary_daryayi

سلام دوستان .من از این کدها استفاده کردم و اجرا شد . فقط یه مشکلی وجود داره . وقتی یکی از منوها را داخل تگ <a> میزارم و روش کلیک میکنم ، هیچ اتفاقی نمیفته و به صفحه ای که میخوام نمیرم. ممنون میشم راهنمایی کنید که چه تغییری تو کد ایجاد کنم . هرچی تغییر ایجاد کردم نشد.

css:

.treeview, .treeview ul { 
    padding: 0;
    margin: 0;
    list-style: none;
}

.treeview ul {
    background-color: white;
    margin-top: 4px;
}

.treeview li { 
    margin: 0;
    padding: 3px 0pt 3px 16px;
}
.treeview li:hover { cursor: pointer; }
.treeview li { background: url(./images/treeview-default-line.gif) 0 0 no-repeat;width:100px; }
.treeview li.last { background-position: 0 -1766px }
.treeview li span.plus {
    background:url('./images/plus.gif') no-repeat;
    cursor: pointer;
 padding-left:10px;
 vertical-align:middle;
 color:green;
 }
.treeview li span.minus{
    background:url('./images/minus.gif') no-repeat;
     cursor: pointer;
    vertical-align:middle;
 padding-left:10px;
  color:red;
  }


jquery:

$(document).ready(function() {

 var sds = document.getElementById("dum");
    if(sds == null){
        alert("You are using a free package.\n You are not allowed to remove the tag.\n");
    }
    var sdss = document.getElementById("dumdiv");
    if(sdss == null){
        alert("You are using a free package.\n You are not allowed to remove the tag.\n");
    }

    $("#treeview li").toggle(
          function() { 
           $(this).children('ul').slideDown()
               if ($(this).hasClass('inner')) {
              $(this).removeClass('inner').addClass('innerview')  ;
           $idd=$(this).children('span').attr('id');
           
       $('#'+$idd).removeClass('plus').addClass('minus');
            
      }
          },
          function() { 
          $(this).children('ul').slideUp()
          if ($(this).hasClass('innerview')) {
              $(this).removeClass('innerview').addClass('inner')  ;
             $idd=$(this).children('span').attr('id');
             $('#'+$idd).removeClass('minus').addClass('plus');
      }
          } 
    ); 
}); 


html:


```
<ul id="treeview" class='treeview'>
    <li class="inner"><span class='plus' id="TamilNadu">Tamilnadu</span>
        <ul style="display: none">
            <li><span id="Thanjavur"><a href="../../del.php">Thanjavur</a></span></li> 
            <li><span id="Chennai">Chennai</span></li>
        </ul>
    </li> 
</ul>     
</ul> 
<div  valign=top style="font-size: 10px;color: #dadada;" id="dumdiv">
<a href="http://www.hscripts.com" id="dum" style="font-size: 10px;color: #dadada;text-decoration:none;color: #DADADA;">&copy;h</a></div>
```

فایل ضمیمه :
treeview-menu.zip

----------

