سؤال تقني بخصوص Jquery Accordion

**COSINUS** · 23-01-2009

السلام عليكم
أنا أستخدم تقنية Jquery وUI Accordion في عمل قوائم للمواقع بهذا الشكل :
عنوان1
رابط 1
رابط 2
عنوان 2
رابط 1
رابط 2

ولكني اليوم أواجه مشكلة في ضرورة أن يكون الأمر معقد أكثر حيث أحتاج أن تكون القائمة متشعبة أكثر :

عنوان 1
رابط 1
عنوان فرعي 1
رابط فرعي 1
رابط فرعي 2
رابط 2
عنوان 2
رابط 1
رابط 2

وهو ما استعصى عليّ رغم العديد من المحاولات :con2: ، فهل من درس يتناول هذه المسألة هذه علما أني راجعت المواضيع في منتدى سوالف ولم أجد تناولا لهذه المسألة. :court:
شكرا على الإفادة

**soma** · 25-01-2009

السلام عليكم

اخي جرب الكود التالي .... تم عمله حسب فهمي لشرحك .. لو في شئ معين غير هذا وضح ماتريد بصورة ...

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collapsible Message Panels</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//hide the all of the element with class msg_body
	$(".msg_body").hide();
	$(".sub_msg_body").hide();
	//toggle the componenet with class msg_body
	$(".msg_head").click(function(){
		$(this).next(".msg_body").slideToggle(600).siblings(".msg_body:visible").slideUp("600");		
	});
	
	$(".sub_head").click(function(){
		$(this).next(".sub_msg_body").slideToggle(600);
	});
	
});
</script>
<style type="text/css">
body {
	margin: 10px auto;
	width: 570px;
	font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.msg_list {
	margin: 0px;
	padding: 0px;
	width: 383px;
}
p {
	padding: 0 0 1em;
}
.msg_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color:#FFCCCC;
	margin:1px;
}
.msg_body {
	padding: 5px 10px 15px;
	background-color:#F4F4F8;
}
.sub_head {
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#7AC5CD;	
}
.sub_msg_body {
	padding: 5px 10px 15px;
	background-color:#F4F4F8;
}
.msg_body .link{  
    
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#7AC5CD;		
}
.sub_msg_body .link{      
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#CDC8B1;		
}
</style>
</head>
<body>
<div align="center">
  <p>Click on the each news head to toggle
</p>
  
</div>
<div class="msg_list">
		<p class="msg_head">Header-1 </p>		
		<div class="msg_body">
		  <div class="link"><a href='#'>link-1</a></div> 
		  <p class="sub_head">Sub-Header-1 </p>	
		  <div class="sub_msg_body">
		    <div class="link"><a href='#'>link-1</a></div><br />
		    <div class="link"><a href='#'>link-2</a></div>
		  </div>			  
		  <div class="link"><a href='#'>link-2</a></div> 
		</div>
        
        <p class="msg_head">Header-2 </p>		
		<div class="msg_body">
		  <div class="link"><a href='#'>link-1</a></div><br/>  		    
		  <div class="link"><a href='#'>link-2</a></div> 
		</div>	
</div>
</body>
</html>

**COSINUS** · 25-01-2009

مشكوررررررر جدا وبارك الله فيك
الكود أكثر من راااائع !!
ممكن سؤالين لو سمحت ؟
السؤال الأول :
-----------------
Sub-Header-1 ممكن يكون في نفس الوقت عنوان و رابط ؟ يعني لما أضغط على Sub-Header-1 تظهر القوائم الفرعية الخاصة به إضافة إلى تشغيل صفحة ؟
السؤال الثاني :
----------------
عند الضغط على أي رابط (طبعا ستم استدعاء صفحة جديدة) فهل يمكن أن يبقى الرابط متغير اللون ؟ هذا السؤال وجدت له مثال على هذا الرابط :
jQuery UI Accordion
( انظر Navigation - Unordered List with anchors and nested lists)

وفي الأخير شكرا لك كثيرا لأني كنت قد بدأت في تقنية Tree لجعلها ملائمة لطلبي ولكنك أتيت بالحل الشافي فشكرا وسامحني لجهلي بـJquery لأنه من الضروري تعلمه ولكن الوقت يعوزني في هذا الوقت وأنا ممتن لك كثرا على الوقت والجهد فجزاك الله ألف خير

**soma** · 25-01-2009

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collapsible Message Panels</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	last=null;
	$(".msg_body").hide();
	$(".sub_msg_body").hide();
	
	$(".msg_head").click(function(){
		$(this).next(".msg_body").slideToggle(600).siblings(".msg_body:visible").slideUp("600");	        
		$(this).toggleClass("active");
	    $(this).siblings(".msg_head").removeClass("active");		
	});
	
	$(".sub_head").click(function(){
		$(this).next(".sub_msg_body").slideToggle(600);
		if ( $(this).filter(':contains(Sub-Header-1)') )
		 window.open ("http://www.google.com"); 
	});	
	
	$(".msg_body .link,.sub_msg_body .link").click(function(){
	    $(last).css({'background-color':'#CDC8B1', 'border-left': '5px solid #ccc'});
		$(this).css({'background-color':'#ffe', 'border-left': '5px solid #ccc'});
		last=this;
	});	
	
	
});
</script>
<style type="text/css">
body {
	margin: 10px auto;
	width: 570px;
	font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.msg_list {
	margin: 0px;
	padding: 0px;
	width: 383px;
}
p {
	padding: 0 0 1em;
}
.msg_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color:#FFCCCC;
	margin:1px;
}
.msg_body {
	padding: 5px 10px 15px;
	background-color:#F4F4F8;
}
.sub_head {
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#7AC5CD;	
}
.sub_msg_body {
	padding: 5px 10px 15px;
	background-color:#F4F4F8;
}
.msg_body .link{          
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#7AC5CD;			
}
.sub_msg_body .link{      
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#CDC8B1;			
}
a {text-decoration:none; }
.active {background-color:#A2B5CD;}

</style>
</head>
<body>
<div align="center">
  <p>Click on the each news head to toggle
</p>
  
</div>
<div class="msg_list">
		<p class="msg_head">Header-1</p>		
		<div class="msg_body">
		  <div class="link"><a href='#'>link-1</a></div> 
		  <p class="sub_head">Sub-Header-1 </p>	
		  <div class="sub_msg_body">
		    <div class="link"><a href='#'>link-1</a></div><br />
		    <div class="link"><a href='#'>link-2</a></div>
		  </div>			  
		  <div class="link"><a href='#'>link-2</a></div> 
		</div>
        
        <p class="msg_head">Header-2</p>		
		<div class="msg_body">
		  <div class="link"><a href='#'>link-1</a></div><br/>  		    
		  <div class="link"><a href='#'>link-2</a></div> 
		</div>	
</div>
</body>
</html>

في الكود السابق قمت بالتغيير مثل مااردت هنا .." عند الضغط على أي رابط (طبعا ستم استدعاء صفحة جديدة) فهل يمكن أن يبقى الرابط متغير اللون ؟ هذا السؤال وجدت له مثال على هذا الرابط : "

اما بالنسبة لطلبك الأول " Sub-Header-1 ممكن يكون في نفس الوقت عنوان و رابط ؟ يعني لما أضغط على Sub-Header-1 تظهر القوائم الفرعية الخاصة به إضافة إلى تشغيل صفحة ؟"
فهي ممكن لكن لمن سويتها فكل مااضغط على اللينك سواء لقفل القائمة او فتحها فيؤدي لإستدعاء الرابط ..

اعذرني هذا اللي توصلت ليه ... لسة مبتدأة

**COSINUS** · 25-01-2009

جزاكم الله ألف ألف خير
وبارك الله فيكي
كفيتي ووفيتي

**COSINUS** · 02-02-2009

ممكن طلب تغيير في هذا الكود ؟ حيث أنه لو غيرت مثلا :
<div class="link"><a href='#'>link-1</a></div><br/>
ووضعت رابط مثل :
<div class="link"><a href='section.php?id=8&lang=en'> > link-2</a></div>
فإن القائمة ترجع لحالها الأصلية والرابط الذي ضغطت عليه يفقد خاصية التلوين وبالتالي لا أعرف أي الرابط يشتغل
ملاحظة أنا أريد تطبق على هذا الموقع في القائمة الموجودة على اليسار :
HUBWOO
الكود صعب التغيير بالنسبة لي، لقد نححت في تغيير css لكن إذا كان الرابط عبارة عن # فهو يشتغل أما إذا كان الرابط عبارة عن صفحة جديدة فهو يفقد خاصيته بحيث لا يمكن معرفة أي رابط شغطت آخر مرة وفي أي صفحة انا
جزاكم لله خيرا

الموضوع: سؤال تقني بخصوص Jquery Accordion

أدوات الموضوع

بحث في الموضوع

سؤال تقني بخصوص Jquery Accordion

المواضيع المتشابهه

[سؤال تقني] ابونتو أم ويندوز 7 !

مشكلة برمجة بخصوص تطبيق Accordion - اتمنى الحل

ضوابط المشاركة