0
jQueryのサイドバーに問題があります。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&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>
それがあります、元exemple:http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/ –
それが仕事であるhttps://jsfiddle.net/ehevshat/ –