چگونگی ایجاد ساختار، منوی درختی در جی کوئری

[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