基於.class的JQuery Accordion開放面板

我有以下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>

來源

2014-11-24 ZJ Green

你能解釋一下好你想要達到什麼樣的？ – Dim13i 2014-11-24 17:36:07

目前我的菜單面板打開和關閉點擊，但因爲我在幾頁上使用它，並有一個CSS類來突出顯示示例代碼中選定的菜單選項「星際迷航」。我需要的是修改我的Jquery代碼來檢測'selected'類，並在例子中的父操作'Glossaries'上打開手風琴。這樣當用戶進入選定頁面時，正確的菜單被打開 – 2014-11-25 13:59:59

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

使用jQuery您可以快速訪問喜歡這個選定的元素：

$(".selected")

知道了這一點，並認識到這個元素是一個<li>標籤，我們只需要了slideDown其父頁面<ul>一旦加載頁面。所以你根本就您$(document).ready();函數中添加以下代碼：

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

下面是修改FIDDLE

來源

2014-11-25 16:51:00 Dim13i

非常感謝，現在像我想要的那樣工作 – 2014-11-25 21:23:50

基於.class的JQuery Accordion開放面板

回答

相關問題