javascript - "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-query 代码:

$("#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脚本造成了麻烦，但我不知道如何解决它! 注意:“a”标签的 css 属性设置为:

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

Answer 1

您使用的主要原因:

return false; //this prevents flicker

上面的代码是停止默认事件并阻止它执行任何操作。删除它有效。为了防止转到顶部，请将事件处理程序仅附加到那些 <a>具有 href="#" 的标签。像这样的东西:

$('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...
});