在jQuery中顯示我當前的節點

Question

我的jQuery側欄有問題。

每次單擊側欄后，我的頁面都會重新加載。 我可以通過id標記，li是菜單中的當前位置。

但是我的jQuery不會在側邊欄上滑動以顯示當前的上下文菜單。

在我添加一個新的子菜單之前，它一直有效。...:(

有人可以幫我嗎？

謝謝。

 $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); $("#menu-toggle-2").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled-2"); $('#menu ul').hide(); }); function initMenu() { $('#menu ul').hide(); var test = $('[id=submenu]') for (i = 0; i < test.length; i++) { var element = test[i]; if ($(element).children('.current').length > 0) { $('#tournaments ul:visible').slideUp('normal'); $(element).parent().slideDown('normal') } } $('#menu ul').children('.current').parent().show(); $('#menu li a').click(function() { var checkElement = $(this).next(); if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; } if ((checkElement.is('ul')) && (!checkElement.is(':visible')) && checkElement.attr("id") != "submenu") { $('#menu ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } if ((checkElement.is('ul')) && (!checkElement.is(':visible')) && checkElement.attr("id") == "submenu") { $('#tournaments ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } }); } $(document).ready(function() { initMenu(); }); 

 <div id="sidebar-wrapper"> <ul class="sidebar-nav nav-pills nav-stacked" id="menu"> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-universal-access fa-stack-1x "></i> </span> My Compete </a> <ul class="nav-pills nav-stacked" style="list-style-type: none; display: none;"> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-tachometer fa-stack-1x "></i> </span> Dashboard </a> </li> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-gamepad fa-stack-1x "></i> </span> </a> <a length="0" href="/PlayerPage/PlayerPage?userId=1&amp;universeId=1">Players</a> </li> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-sort-amount-desc fa-stack-1x "></i> </span> </a> <a length="0" href="/Ranking/Ranking?universeId=1">Rank</a> </li> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-users fa-stack-1x "></i> </span> Head to Head </a> </li> </ul> </li> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-trophy fa-stack-1x "></i> </span> Tournaments </a> <ul class="nav-pills nav-stacked" style="list-style-type: none;" id="tournaments"> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-trophy fa-stack-1x "></i> </span> 2015-S1 </a> <ul id="submenu" class="nav-pills nav-stacked" style="list-style-type: none; display: none;"> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/1" style="">Open d'australie</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/2" style="">Kiev</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/3" style="">Dublin</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/4" style="">Casa Blanca</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/5" style="">Monte Carlo</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/6" style="">Roland Garros</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/7" style="">Auckland</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/8" style="">US Open</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/9" style="">Paris Bercy</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/10" style="">London World Tour Finals</a> </li> </ul> </li> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-trophy fa-stack-1x "></i> </span> 2016-S1 </a> <ul id="submenu" class="nav-pills nav-stacked" style="list-style-type: none;"> <li class="current"> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/11" style="color:#fff">Open d'australie</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/12" style="">Boston</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/13" style="">Toronto</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/14" style="">Casa Blanca</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-check-square fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/15" style="">Rome</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left" style="color:#fff"> <i class="fa fa-star fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/16" style="color:#fff">Roland Garros</a> </li> <li class=""> <a href="#"> <span class="fa-stack fa-lg pull-left" style="color:#fff"> <i class="fa fa-star fa-table-1x "></i> </span> </a> <a href="/Tournament/Tournament/17" style="color:#fff">Dublin</a> </li> </ul> </li> </ul> </li> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-database fa-stack-1x "></i> </span> Admin </a> <ul class="nav-pills nav-stacked" style="list-style-type: none; display: none;"> <li> <a href="#"> <span class="fa-stack fa-lg pull-left"> <i class="fa fa-tachometer fa-stack-1x "></i> </span> </a> <a href="/Admin/ManageTournaments?Length=0" style="color:#fff">Manage Tournaments</a> </li> </ul> </li> </ul> </div> 

Answer 1

似乎您未在代碼中引用jquery，請嘗試在腳本頂部添加jquery。您的腳本應如下所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>

 $("#menu-toggle").click(function(e) {
 e.preventDefault();
 $("#wrapper").toggleClass("toggled");
 });

 $("#menu-toggle-2").click(function(e) {
 e.preventDefault();
 $("#wrapper").toggleClass("toggled-2");
 $('#menu ul').hide();
  });

function initMenu() {
 $('#menu ul').hide();

 var test = $('[id=submenu]')
 for (i = 0; i < test.length; i++) {
  var element = test[i];
  if ($(element).children('.current').length > 0) {
  $('#tournaments ul:visible').slideUp('normal');
  $(element).parent().slideDown('normal')
  }
 }

$('#menu ul').children('.current').parent().show();

 $('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  return false;
}

if ((checkElement.is('ul')) && (!checkElement.is(':visible')) && checkElement.attr("id") != "submenu") {
  $('#menu ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
}

if ((checkElement.is('ul')) && (!checkElement.is(':visible')) && checkElement.attr("id") == "submenu") {
  $('#tournaments ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
  }
 });
 }

 $(document).ready(function() {
    initMenu();
   });
 </script>