حمیدرضا 180 ارسال شده در مرداد 92 گزارش بازنشر ارسال شده در مرداد 92 (ویرایش شده) سلام دوستانلطفا کمکم کنید برای این ساختار css بنویسم. گرافیک نمیخوام.فقط نحوه باز و بسته شدن میگم که با کلیک روی سر دسته انجام میشه.ساختار دسته های وردپرس هم که اینطوری هست.<ul><li class="cat-item "><a href="#">سر دسته اول</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li><li class="cat-item"><a href="#">سر دسته دوم</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li></ul> ویرایش شده مرداد 92 توسط حمیدرضا نقل قول لینک به ارسال
Farid 2281 ارسال شده در مرداد 92 گزارش بازنشر ارسال شده در مرداد 92 سلامباز و بسته شدن رو با jquery ui می تونید درست کنید ، این کدها رو قبل ار تگ head بذارید :<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>و بعد هم کدهای html :<div id="accordion"><h3>دسته ی اول</h3><div><p>زیر دسته ی اول</p><p>زیر دسته ی دوم</p></div><h3>دسته ی اول</h3><div><p>زیر دسته ی اول</p><p>زیر دسته ی دوم</p></div><h3>دسته ی اول</h3><div><p>زیر دسته ی اول</p><p>زیر دسته ی دوم</p></div></div><script>$( "#accordion" ).accordion();</script>اگر میخوایید استایل دلخواه خودتون رو بدید ، لینکhttp://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.cssرو حذف کنید و استایل خودتون رو بدید . 3 نقل قول لینک به ارسال
حمیدرضا 180 ارسال شده در مرداد 92 مالک گزارش بازنشر ارسال شده در مرداد 92 میشه روی کدای لیست بالا که گذاشتم نشون بدید؟<ul id="accordion"><li class="cat-item "><a href="#">سر دسته اول</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li><li class="cat-item"><a href="#">سر دسته دوم</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li></ul>اینکارو کردم شد. یه دنیا ممنون نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در مرداد 92 گزارش بازنشر ارسال شده در مرداد 92 با css <ul id="accordion"><li class="cat-item " id="cat-item1"><a href="#cat-item1" class="a">سر دسته اول</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li><li class="cat-item" id="cat-item2"><a href="#cat-item12" class="a">سر دسته دوم</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li></ul>.cat-item .children {display:none;}.cat-item:target .children {display:block} وبا جی کوئری <ul id="accordion"><li class="cat-item "><a href="#cat-item1" class="a">سر دسته اول</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li><li class="cat-item"><a href="#cat-item12" class="a">سر دسته دوم</a> <ul class='children'> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> <li class="cat-item"><a href="#">زیر دسته</a></li> </ul></li></ul><script type="text/javascript"><!--$(".children").hide();$(".a").click(function() {$(this).parent("li").find(".children").slideToggle("slow");});//--></script> 3 نقل قول لینک به ارسال
حمیدرضا 180 ارسال شده در مرداد 92 مالک گزارش بازنشر ارسال شده در مرداد 92 ولی در وردپرس که نمیشه class="a"اضافه کرد به لایه اول. نقل قول لینک به ارسال
Morteza 34190 ارسال شده در مرداد 92 گزارش بازنشر ارسال شده در مرداد 92 میتونید از استایل :first استفاده کنید 2 نقل قول لینک به ارسال
حمیدرضا 180 ارسال شده در مرداد 92 مالک گزارش بازنشر ارسال شده در مرداد 92 میشه کاری کرد وقتی روی سر دسته کلیک میکنیم. هم زیر دسته ها باز شه و هم لینک خود سر دسته هم قابل کلیک باشه؟در این حالت لینک های زیر دسته کلیک میشه فقط.مشکلی که پیش میاد اینه که اگه یه دسته ی بدون فرزند داشته باشیم نمیشه استفاده کرد. نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در مرداد 92 گزارش بازنشر ارسال شده در مرداد 92 اگر هر دو فعال بشه که صفحه از اول لود می شه و دوباره زیر منو محو می شه دستور قابل اجراست و من برای چیزی که شنما خواستید کد دادم <script type="text/javascript"><!--$(".children").hide();$(".cat-item>a").click(function() {$(this).parent("li").find(".children").slideToggle("slow");});//--></script> 3 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .