Erkennung des ausgewählten Elements

Question

Ich habe folgendes Javascript, um mein Akkordeonmenü zu bedienen.

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

Wie ändere ich den Code, um die 'ausgewählte' Klasse zu erkennen, und öffne das entsprechende Panel aus dem folgenden HTML-Skript.

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

IS Hier Fiddle Verbindung - https://jsfiddle.net/p7wm4tL2/

Answer 1

Sie haben alte Version von jQuery,
Versuchen Sie, Ihre jquery Version zu aktualisieren.

$(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(); 
}); 

Einmal den Arbeitscode here überprüfen.