2014-11-24 58 views
1

我有以下JQuery代码来操作我的手风琴菜单。基于.class的JQuery Accordion开放面板

<script type="text/javascript" src="_js/jquery-1.11.1.js"></script> 
 
<script type="text/javascript"> 
 
    $(function() { 
 
     var url = window.location.href; 
 
     $('.menu a[href="'+url+'"]').addClass('current_page_item'); 
 
     $("dd:not(:first)").hide(); 
 
     $("dt a").click(function() { 
 
      $("dd").slideUp("fast"); 
 
      $(this).parent("dt").next("dd").slideDown("normal"); 
 
     }); \t 
 
    }); 
 
</script>

如何修改代码来检测“选择”类,并打开从下面的HTML脚本相应的面板。

<div id="SideMenu"> 
 
    <dl> 
 
     <li class="mtop">&nbsp;</li> 
 
     <dt><a href="/index.php">Home</a></dt> 
 
     <dt><a href="#">A.A. Theory</a></dt> 
 
     <dd> 
 
      <ul> 
 
       <li class="litop"><a href="#">Link 5</a></li> 
 
       <li class="limid"><a href="#">Link 6</a></li> 
 
       <li class="limid"><a href="#">Link 7</a></li> 
 
       <li class="libot"><a href="#">Link 8</a></li> 
 
      </ul> 
 
     </dd> 
 
     <dt><a href="#">Glossaries</a></dt> 
 
     <dd> 
 
      <ul> 
 
       <li class="litop"><a href="#">Astronomical</a></li> 
 
       <li class="limid selected"><a href="#">Star Trek</a></li> 
 
       <li class="limid"><a href="#">Science</a></li> 
 
       <li class="libot"><a href="#">Mathematics</a></li> 
 
      </ul> 
 
     </dd> 
 
     <li class="mbot">&nbsp;</li> 
 
    </dl> 
 
</div>

+1

你能解释一下好你想要达到什么样的? – Dim13i 2014-11-24 17:36:07

+0

目前我的菜单面板打开和关闭点击,但因为我在几页上使用它,并有一个CSS类来突出显示示例代码中选定的菜单选项“星际迷航”。我需要的是修改我的Jquery代码来检测'selected'类,并在例子中的父操作'Glossaries'上打开手风琴。这样当用户进入选定页面时,正确的菜单被打开 – 2014-11-25 13:59:59

+0

我已经添加了一个更新的版本jsfiddle [link] http://jsfiddle.net/Zaaka/sw93u7qc/2/ [/ link] – 2014-11-25 15:54:28

回答

0

使用jQuery您可以快速访问喜欢这个选定的元素:

$(".selected") 

知道了这一点,并认识到这个元素是一个<li>标签,我们只需要了slideDown其父页面<ul>一旦加载页面。所以你根本就您$(document).ready();函数中添加以下代码:

$(".selected").parent().slideDown(); 

下面是修改FIDDLE

+0

非常感谢,现在像我想要的那样工作 – 2014-11-25 21:23:50