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