کمک برای نوشتن css دسته بندی

[حمیدرضا 180]

سلام دوستان

لطفا کمکم کنید برای این ساختار 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]

سلام

باز و بسته شدن رو با 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

رو حذف کنید و استایل خودتون رو بدید .

[حمیدرضا 180]

میشه روی کدای لیست بالا که گذاشتم نشون بدید؟

<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]

با 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>

[حمیدرضا 180]

ولی در وردپرس که نمیشه

class="a"

اضافه کرد به لایه اول.

[Morteza 34190]

میتونید از استایل :first استفاده کنید

[حمیدرضا 180]

میشه کاری کرد وقتی روی سر دسته کلیک میکنیم. هم زیر دسته ها باز شه و هم لینک خود سر دسته هم قابل کلیک باشه؟

در این حالت لینک های زیر دسته کلیک میشه فقط.

مشکلی که پیش میاد اینه که اگه یه دسته ی بدون فرزند داشته باشیم نمیشه استفاده کرد.

[imanfakhar 26231]

اگر هر دو فعال بشه که صفحه از اول لود می شه و دوباره زیر منو محو می شه

دستور قابل اجراست

و من برای چیزی که شنما خواستید کد دادم

<script type="text/javascript">
<!--
$(".children").hide();
$(".cat-item>a").click(function() {
$(this).parent("li").find(".children").slideToggle("slow");
});
//-->
</script>