javascript - 可点击的 li 但另一个 li 不可点击

Question

我正试图弄清楚这一点，但对于我的生活来说，我很困惑。我有这个:

<!-- Sidebar Menu -->
<ul class="sidebar-menu">
  <li class="header">HEADER</li>
  <!-- Optionally, you can add icons to the links -->
  <li class="active"><a href="res/link.php"><i class='fa fa-link'></i> 
    <span>Links</span></a></li>
  <li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li>
  <li class="treeview">
    <a href="#"><i class='fa fa-link'></i>
   <span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul><!-- /.sidebar-menu -->

和我的javascript:

var hash = window.location.hash.substr(1);
var href = $('.sidebar-menu li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-10)){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad)
    }                                           
});

$('.sidebar-menu li a > .treeview li a').click(function(){

我在使用这一行时遇到了问题:

$('.sidebar-menu li a > .treeview li a').click(function(){

我希望所有带有 a 标签的 li 都可以点击 sidebar-menu 菜单，但是当我点击 treeview 时 菜单，它作为 href 链接启动。我不想要那个可点击的。

我是否在我的 JavaScript 中正确使用了大于小于符号？

Answer 1

使用它来防止默认的 href 操作

$(your selector).click(function(e) {
  e.preventDefault();
  // e for event
  // preventDefault will stop default href action
});

编辑:或者您可以使用此选择器处理所有 # 个链接并防止默认

$('.sidebar-menu a[href="#"]').click(function(e){
  e.preventDefault();
});

选择器 a[href="#"] 将仅选择参数 href == "#"的 A 标签，然后只需对它们使用 preventDefault() 即可停止默认 href 操作