特定の方法で機能させたい html css と jQuery サイドバーのアコーディオン メニューがあります。親リンクで Web ページを開くことができます。新しいページに移動したときに、サイドバーを展開したままにしておきたいです。現在のマークアップは次のとおりです。
Html:
<script type="text/javascript">
var cssLink = document.createElement("link");
cssLink.href = "http://www.com/css/sidebar-menu.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
document.head.appendChild(cssLink);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../javascript/sidebar-menu_script.js"></script>
<script type="text/javascript" src="../javascript/jquery.easing.1.3.js"></script>
<div class="sidebar-left">
<div id="sidebarmenu">
<ul class="container">
<h3 class="side-headerbar" style="margin-top:25px;">Practice Area's</h3>
<li class="menu">
<ul>
<li class="button"><a href="../personal-injury-attorney.php" class="red">Personal Injury Attorney</a></li>
<li class="dropdown2">
<ul>
<li><a href="../personal-injury-attorney.php">Personal Injury Attorney</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="../workers-compensation.php" class="red">Workers Compensation</a></li>
<li class="dropdown2">
<ul>
<li><a href="../workers-compensation.php">Workers Compensation</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="../employmentharassment.php" class="red">Employment Harrassment & Termination</a></li>
<li class="dropdown2">
<ul>
<li><a href="../employmentharassment.php">Employment Harrassment & Termination</a></li>
<li><a href="../Overtime.php">Wage & Overtime</a></li>
<li><a href="#">Exemptions</a></li>
<li><a href="#">Job Discrimination</a></li>
<li><a href="#">Wrongful Termination</a></li>
<li><a href="#">Pregnancy Discrimination</a></li>
<li><a href="#">Age Discrimination</a></li>
<li><a href="#">Disability Discrimination</a></li>
<li><a href="#">Disability & Worker's Comp</a></li>
<li><a href="#">Racial Discrimination</a></li>
<li><a href="#">National Origin Discrimination</a></li>
<li><a href="#">Religious Discrimination</a></li>
<li><a href="#">Sexual Orientation Discrimination</a></li>
<li><a href="#">Gender or Sex Discrimination</a></li>
<li><a href="#">Sexual Harassment in & Outside the Workplace</a></li>
<li><a href="#">Whistle Blowing</a></li>
<li><a href="#">Glass Ceiling</a></li>
<li><a href="#">Lactation Accommodation</a></li>
<li><a href="#">Non-Competition Clauses</a></li>
<li><a href="#">Employee Status</a></li>
<li><a href="#">Breach of Contract</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="../employmentwage.php" class="red">Employment Wage and Hours</a></li>
<li class="dropdown2">
<ul>
<li><a href="../employmentwage.php">Employment Wage and Hours</a></li>
<li><a href="../workers-compensation-lawyers.php">Wage & Overtime</a></li>
<li><a href="#">Exemptions</a></li>
<li><a href="#">Meal Breaks</a></li>
<li><a href="#">Vacation Pay</a></li>
<li><a href="#">Tip & Gratuities Pooling</a></li>
<li><a href="#">Commission Wages & Internal Sales Person</a></li>
<li><a href="#">Un-authorized Deductions</a></li>
<li><a href="#">Holidays Pay</a></li>
<li><a href="#">Independent Contractors V. Employee</a></li>
<li><a href="#">Minimum Wage</a></li>
<li><a href="#">Paydays, Pay Periods, Personnel Files & Records</a></li>
<li><a href="#">Reporting Time Pay</a></li>
<li><a href="#">Split Shift</a></li>
<li><a href="#">Waiting Time Penalty & Final Paycheck</a></li>
<li><a href="#">Alternative work schedule</a></li>
<li><a href="#">Cash Pay "Under the Table"</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="../estateplanning.php" class="red">Estate Planning</a></li>
<li class="dropdown2">
<ul>
<li><a href="../estateplanning.php">Estate Planning</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="../assetsprotection.php" class="red">Assets Protection</a></li>
<li class="dropdown2">
<ul>
<li><a href="../assetsprotection.php">Assets Protection</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="../bankruptcy.php" class="red">Bankruptcy</a></li>
<li class="dropdown2">
<ul>
<li><a href="../bankruptcy.php">Bankruptcy</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="../inmigration.php" class="red">Immigration</a></li>
<li class="dropdown2">
<ul>
<li><a href="../inmigration.php">Immigration</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
__________________________________________________________________________________________
/* CSS Document */
#sidebarmenu ul{
margin:0;
padding:0;
width:200px;
}
#sidebarmenu ul.container{
/* The topmost UL */
width:200px;
margin:0 auto;
padding:0px;
}
#sidebarmenu li{
list-style:none;
text-align:left;
font-size:12px;
}
#sidebarmenu ul li a:hover{
background: none repeat scroll 0 0 #1B5188;
color:#F2F2F2;
}
#sidebarmenu li.menu{
/* The main list elements */
padding:1px 0;
width:100%;
}
#sidebarmenu li.button a{
/* The section titles */
display:block;
font-family:BPreplay,Arial,Helvetica,sans-serif;
font-size:12px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}
#sidebarmenu li.button a:hover{
/* Removing the inherited underline from the titles */
background: none repeat scroll 0 0 #1B5188;
color:#F2F2F2;
}
#sidebarmenu li.button a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:0px;
display:block;
}
/* Setting up different styles for each section color */
#sidebarmenu li.button a.red{
-moz-transition: font-weight 0.1s ease 0s, background 0.5s ease 0s, color 0.5s ease 0s, padding-left 0.3s ease 0s;
background: none repeat scroll 0 0 #F2F2F2;
color: #1B5188;
display: block;
font: bold 12px/17px Arial;
padding: 4px 0 2px 0px;
text-decoration: none;
text-transform:uppercase;
width:200px;
text-align:center;
}
#sidebarmenu li.button a.red a:hover{
background: none repeat scroll 0 0 #1B5188;
color:#F2F2F2;
width:200px;
}
#sidebarmenu li.button a.red span{background-color: #F2F2F2;}
/* The hover effects */
#sidebarmenu li.button a:hover{
background: none repeat scroll 0 0 #1B5188;
color:#F2F2F2;
width: 200px;
}
#sidebarmenu li.button a:hover span{
background-position:bottom right;
background: none repeat scroll 0 0 #1B5188;
color:#F2F2F2;}
#sidebarmenu .dropdown2{
/* The expandable lists */
display:none;
padding-top:5px;
width:100%;
}
#sidebarmenu .dropdown2 li{
/* Each element in the expandable list */
background-color:#1B5188;
border:1px solid #1B5188;
color:#CCCCCC;
margin:5px 0;
padding:5px 17px;
}
/* The styles below are only necessary for the demo page */
#sidebarmenu h1{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:36px;
font-weight:normal;
margin-bottom:15px;
}
#sidebarmenu h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
padding-right:140px;
right:0;
text-align:right;
text-transform:uppercase;
top:15px;
}
.clear{
clear:both;
}
#sidebarmenu #main{
/* The main container */
margin:15px auto;
text-align:center;
width:920px;
position:relative;
}
#sidebarmenu a, a:visited {
color:#f2f2f2;
text-decoration:none;
outline:none;
font-size:12px;
}
#sidebarmenu a:hover{
text-decoration:underline;
}
p{
/* The tut info on the bottom of the page */
padding:10px;
text-align:center;
}
/* PERSONAL STYLES */
#sidebarmenu .sidebarmenu .side-headerbar {
background: none repeat scroll 0 0 #9D0F13;
color: #FBFBFB;
font: bold 13px Verdana;
margin-bottom: 0;
margin-top: 0;
padding: 7px 0;
text-align: center;
text-transform: uppercase;
}
.sidebarmenu {
float: left;
width: 200px;
}
#sidebarmenu .side-headerbar {
background: none repeat scroll 0 0 #9D0F13;
color: #FBFBFB;
font: bold 13px Verdana;
margin-bottom: 0;
margin-top: 0;
padding: 7px 0;
text-align: center;
text-transform: uppercase;
width:200px;
}
#sidebar-left {
width:208px;
}
#sidebarmenu {
float: left;
width: 200px;
}
__________________________________________________________________________________________
jQuery Script:
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('#sidebarmenu li.button a').click(function(e){
/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();
/* Closing all other drop down sections, except the current one */
$('.dropdown2').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
/* Preventing the default event (which would be to navigate the browser to the link's address) */
/* e.preventDefault(); */t
})
});