كود:
<!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 تظهر القوائم الفرعية الخاصة به إضافة إلى تشغيل صفحة ؟"
فهي ممكن لكن لمن سويتها فكل مااضغط على اللينك سواء لقفل القائمة او فتحها فيؤدي لإستدعاء الرابط ..
اعذرني هذا اللي توصلت ليه ... لسة مبتدأة