檢測選定元素

Question

我收看以下Javascript以運行手風琴菜單。

<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script> 
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#accordian a").click(function() { 
      var link = $(this); 
      var closest_ul = link.closest("ul"); 
      var parallel_active_links = closest_ul.find(".active") 
      var closest_li = link.closest("li"); 
      var link_status = closest_li.hasClass("active"); 
      var count = 0; 

      closest_ul.find("ul").slideUp(function() { 
       if (++count == closest_ul.find("ul").length) 
        parallel_active_links.removeClass("active"); 
      }); 

      if (!link_status) { 
       closest_li.children("ul").slideDown(); 
       closest_li.addClass("active"); 
      } 
     }) 

     $(".selected").parent().slideDown(); 
    }) 
</script> 

如何修改代碼以檢測'selected'類並從下面的html腳本中打開相應的面板。

<div id="accordian"> 
    <ul> 
     <li> 
      <h3 class="mtop">&nbsp;</h3> 
     </li> 
     <li> 
      <h3><a href="#">Dashboard</a></h3> 
      <ul> 
       <li class="litop"><a href="#">Reports</a></li> 
       <li class="limid"><a href="#">Search</a></li> 
       <li class="limid"><a href="#">Graphs</a></li> 
       <li class="libot"><a href="#">Settings</a></li> 
      </ul> 
     </li> 
     <li> 
      <h3><a href="#">Calendar</a></h3> 
      <ul> 
       <li class="litop"><a href="#">Current Month</a></li> 
       <li class="limid"><a href="#">Current Week</a></li> 
       <li class="limid"><a href="#">Previous Month</a></li> 
       <li class="limid"><a href="#">Previous Week</a></li> 
       <li class="limid"><a href="#">Next Month</a></li> 
       <li class="limid"><a href="#">Next Week</a></li> 
       <li class="limid"><a href="#">Team Calendar</a></li> 
       <li class="limid"><a href="#">Private Calendar</a></li> 
       <li class="libot"><a href="#">Settings</a></li> 
      </ul> 
     </li> 
     <li> 
      <h3><a href="#">Favourites</a></h3> 
      <ul> 
       <li class="litop"><a href="#">Global favs</a></li> 
       <li class="limid selected"><a href="#">My favs</a></li> 
       <li class="limid"><a href="#">Team favs</a></li> 
       <li class="libot"><a href="#">Settings</a></li> 
      </ul> 
     </li> 
     <li> 
      <h3 class="mbot">&nbsp;</h3> 
     </li> 
    </ul> 
</div> 

這裏是小提琴鏈接 - https://jsfiddle.net/p7wm4tL2/

Answer 1

您有舊版本的jQuery，
嘗試更新的jQuery版本。

$(document).ready(function() { 
    $("#accordian a").click(function() { 
     var link = $(this); 
     var closest_ul = link.closest("ul"); 
     var parallel_active_links = closest_ul.find(".active") 
     var closest_li = link.closest("li"); 
     var link_status = closest_li.hasClass("active"); 
     var count = 0; 

     closest_ul.find("ul").slideUp(function() { 
      if (++count == closest_ul.find("ul").length) 
       parallel_active_links.removeClass("active"); 
     }); 

     if (!link_status) { 
      closest_li.children("ul").slideDown(); 
      closest_li.addClass("active"); 
     } 
    }) 

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

一旦檢查工作代碼here。