jquery - 当单击父级并定向到新页面时，jQuery Accordian 侧边栏子菜单保持展开

Question

我有一个 html css 和 jQuery 侧边栏手风琴菜单，我想以某种方式运行。我希望父链接打开网页。当转到新页面时，我希望侧边栏保持扩展。这是当前的标记：

---

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
    })

});