طراحی منو برای کد های html توسط jquery

[sg.programmer]

سلام برای منو زیر در برنامه پطوری باید منو طراحی کرد؟ به نجوی که با کلیک کردن تغییر استایل داده شود؟




<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-content">

<!-- User dropdown -->
<div class="user-menu dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/300" alt="" />
<div class="user-info">
<span>development</span>
</div>
</a>
</div>
<!-- /user dropdown -->


<!-- Main navigation -->
<ul class="navigation">
<li class="active"><a href="Default.aspx"><span>صفحه اصلی</span> <i class="icon-screen2"></i></a></li>
<li>
<a href="pg_DemandsListVosol.aspx"><span>لیست پرونده ها</span> <i class="icon-paragraph-justify2"></i></a>
<ul>
<li><a href="pg_DemandsManager.aspx">مدیریت پرونده ها</a></li>
<li><a href="pg_DemandsListVosol.aspx">لیست وصول</a></li>
<li><a href="pg_UserManager.aspx">مدیریت اعضا</a></li>
<li><a href="pg_LegalUnitAction.aspx">مدیریت حقوقی</a></li>
<li><a href="validation.html">Validation</a></li>
<li><a href="file_uploader.html">Multiple file uploader</a></li>
<li><a href="form_snippets.html">Form snippets</a></li>
</ul>
</li>
<li>
<a href="pg_UserManager.aspx"><span>مدیریت کاربران</span> <i class="icon-grid"></i></a>
<ul>
<li><a href="visuals.html">Visuals &amp; notifications</a></li>
<li><a href="navs.html">Navs</a></li>
<li><a href="panel_options.html">Panel options</a></li>
<li><a href="navbars.html">Navbars</a></li>
<li><a href="info_blocks.html">Info blocks</a></li>

</ul>
</li>
</ul>
</div>

</div>
<!-- /Sidebar -->

[sg.programmer]

سلام کسی نمیدونه چطوری این امکان پذیر هست؟

[rezashaban]

سلام دوست عزیز
میتونی یه کد بنویسی که موقع کلیک روی اون المنت موردنظرت به کلاس css خاص مثلا کلاس open رو بهش اضافه کنه به تغییرات ظاهری رو توی کلاس بنویسی