Javascript 可点击的li，但另一个li不可点击

我想弄明白，但我的一生都很困惑。我有这个：

<!-- 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 -->

我在这条线路上遇到了问题：

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

我希望所有带有

a

标记的

li

都可以单击

侧栏菜单

菜单，但是当我单击

treeview

菜单时，它会作为href链接启动。我不想让它被点击

---

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

使用此选项可防止默认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操作

使用此选项可防止默认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操作

如果您只需要选择器正下方的元素，请使用

。

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

这将仅选择直接位于

侧栏菜单中的
li
标记中的
a
标记：

$('.sidebar-menu > li > a')

您的第一次单击可以如下所示：

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)
    }                                           
});

$('.treeview li a').click(function(){
    // do stuff.
});

您的第二个可以如下所示：

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)
    }                                           
});

$('.treeview li a').click(function(){
    // do stuff.
});

这取决于你要做多少嵌套，但这将适用于树视图中的所有
a
标记，而不管嵌套级别如何

编辑：
我知道你根本不希望树可以点击。在这种情况下，您根本不应该使用
a
标记。使用类似于
span
的样式，使其看起来像链接。链接（
a
）在某个地方。如果你不去任何地方，不要使用
a

小提琴：

片段：


$（文档）.ready（函数（）{
var hash=window.location.hash.substr（1）；
var href=$（'.sidebar菜单li a'）。每个（函数（）{
var href=$（this.attr（'href'）；
if（hash==href.substr（0，href.length-10））{
var toLoad=hash+'.php#content'；
$（“#内容”）.load（toLoad）
}											
});
$（'.sidebar menu>li>a'）。单击（函数（）{
var toLoad=$（this.attr（'href'）+'#content'；
$（'content'）.hide（'fast'，loadContent）；
$（“#加载”）.remove（）；
$（“#包装器”）.append（'LOADING…'）；
$（'加载'）.fadeIn（'正常'）；
window.location.hash=$（this.attr（'href'）.substr（0，$（this.attr（'href'）.length-4）；
函数loadContent（）{
$（'#content'）.load（toLoad'，showNewContent（））
}
函数showNewContent（）{
$（'#content'）.show（'normal'，hideLoader（））；
}
函数hideLoader（）{
$（'加载'）.fadeOut（'正常'）；
}
返回false；
});
});
.treeLink{
文字装饰：下划线；
颜色：蓝色；
光标：指针；
}


标题




二级链接
二级链接


如果您只需要选择器正下方的元素，请使用
。
这将仅选择直接位于
侧栏菜单中的
li
标记中的
a
标记：

$('.sidebar-menu > li > a')

您的第一次单击可以如下所示：

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)
    }                                           
});

$('.treeview li a').click(function(){
    // do stuff.
});

您的第二个可以如下所示：

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)
    }                                           
});

$('.treeview li a').click(function(){
    // do stuff.
});

这取决于你要做多少嵌套，但这将适用于树视图中的所有
a
标记，而不管嵌套级别如何

编辑：
我知道你根本不希望树可以点击。在这种情况下，您根本不应该使用
a
标记。使用类似于
span
的样式，使其看起来像链接。链接（
a
）在某个地方。如果你不去任何地方，不要使用
a

小提琴：

片段：


$（文档）.ready（函数（）{
var hash=window.location.hash.substr（1）；
var href=$（'.sidebar菜单li a'）。每个（函数（）{
var href=$（this.attr（'href'）；
if（hash==href.substr（0，href.length-10））{
var toLoad=hash+'.php#content'；
$（“#内容”）.load（toLoad）
}											
});
$（'.sidebar menu>li>a'）。单击（函数（）{
var toLoad=$（this.attr（'href'）+'#content'；
$（'content'）.hide（'fast'，loadContent）；
$（“#加载”）.remove（）；
$（“#包装器”）.append（'LOADING…'）；
$（'加载'）.fadeIn（'正常'）；
window.location.hash=$（this.attr（'href'）.substr（0，$（this.attr（'href'）.length-4）；
函数loadContent（）{
$（'#content'）.load（toLoad'，showNewContent（））
}
函数showNewContent（）{
$（'#content'）.show（'normal'，hideLoader（））；
}
函数hideLoader（）{
$（'加载'）.fadeOut（'正常'）；
}
返回false；
});
});
.treeLink{
文字装饰：下划线；
颜色：蓝色；
光标：指针；
}


标题




二级链接
二级链接


Make
href=“”
而不是
href=“#”
，如果你不想让它可以点击。
Make
href=“
而不是
href=“#”
如果你不想让它可以点击。
在CSS（以及jQuery）中，
符号表示直接的子元素。因此，
a>.treeview
选择具有treeview类的元素，其父元素是
。您的HTML似乎没有这些内容，因此您的单击处理程序不会绑定到任何内容。您认为
会做什么？如果您的HTML中有任何元素与该选择器匹配，则该元素将无效，并且浏览器将在创建DOM时尝试重新排列元素节点；因此选择器仍然不匹配<