"a"タグのhrefはul liで動作しません

Question

私は内部にいくつかのリンクを持つ切り替え可能なサイドバーと、リンクのためのアクティブなクラスを有効にするいくつかのj-queryコードを持っています。ここで

を働いていないことは、私のHTMLコードは次のとおりです。

<div id="wrapper" class="toggled-2"> 
    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
    <ul class="sidebar-nav nav-pills nav-stacked" id="menu"> 
     <li class="active"> 
     <a href="#" class="a-properties"> 
      <asp:Literal runat="server" Text="<%$ Resources:Dashboard,Home%>" /> 
      <span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x " style="float: left;"></i></span> 
     </a> 
     <ul class="nav-pills nav-stacked" style="list-style-type: none;"> 
      <li> 
      <a href="https://www.google.com/" class="a-properties subMenu"> 
       <span class="glyphicon glyphicon-record icon-style" aria-hidden="true"></span> 
       <asp:Literal runat="server" Text="<%$ Resources:Dashboard,kartabl%>" /> 
       <span class="fa-stack fa-lg pull-left"></span> 
      </a> 
      </li> 
      <li> 
      <a href="https://www.google.com/" class="a-properties subMenu"> 
       <span class="glyphicon glyphicon-record icon-style" aria-hidden="true"></span> 
       <asp:Literal runat="server" Text="<%$ Resources:Dashboard,virayesh_mshakhasat%>" /> 
       <span class="fa-stack fa-lg pull-left"></span> 
      </a> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 
    <!-- Page Content --> 
    <div id="page-content-wrapper"> 
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
    </asp:ContentPlaceHolder> 
    </div> 
</div> 

、ここでは私のJ-クエリのコードは次のとおりです。

$("#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(); 
}); 
$("#menu a").click(function() { 
    if (!$(this).parent().hasClass("active") && !$(this).hasClass("subMenu")) { 
    $(".active").removeClass("active"); 
    $(this).parent().addClass("active"); 
    } else { 
    return false; //this prevents flicker 
    } 
}); 
$(".subMenu").click(function() { 
    if (!$(this).hasClass("sub-active")) { 
    $(".sub-active").removeClass("sub-active"); 
    $(this).parent().addClass("sub-active"); 
    } else { 
    return false; //this prevents flicker 
    } 
}); 

「いくつかは、javaスクリプトは、トラブルを作っていると言ったが、私はドン私は私を修正する方法を知っているt！ 注：

display: block; 
width: 100%; 
height: 100%; 

Answer 1

使用している主な理由：「」タグのCSSプロパティに設定されている

return false; //this prevents flicker 

を上記のコードは、デフォルトのイベントを停止し、それを防ぐためです文字通り何でもすることから。それを取り除くことができます。一番上に行くのを避けるため、href="#"のタグ<a>にのみイベントハンドラを添付してください。

$('a[href="#"]').click(function() { 
    // Your code here... 
    return false; 
}); 

最後に、私はreturn falseを使用しない、本当に助言するが、代わりに使用します：ような何か

$('a[href="#"]').click(function (e) { 
    // This is safer version of return false and also doesn't affect the links. 
    e.preventDefault(); 
    // Your code here... 
});