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>