可点击的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(){

我希望所有带有sidebar-menu标签的li a点击treeview菜单，但是当我点击<!-- The ant.properties file can be created by you. It is only edited by the 'android' tool to add properties to it. This is the place to change some Ant specific build properties. Here are some properties you may want to change/update: source.dir The name of the source directory. Default is 'src'. out.dir The name of the output directory. Default is 'bin'. For other overridable properties, look at the beginning of the rules files in the SDK, at tools/ant/build.xml Properties related to the SDK location or the project target should be updated using the 'android' tool with the 'update' action. This file is an integral part of the build system for your application and should be checked into Version Control Systems. --> 菜单时，它会作为href链接启动。我不想要那个可点击的。

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

Answer 1

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

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

编辑：或者您可以使用此选择器处理所有＃链接并使用preventDefault

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

selector a[href="#"]将仅使用param href ==“＃”选择A-tags，然后在它们上使用preventDefault（）来停止默认href操作

Answer 2

如果您只想在选择器下直接使用元素，请使用>。 这将直接在a中的li代码中直接选择sidebar-menu代码：

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

您的第一个onclick可能如下所示：

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。

小提琴：https://jsfiddle.net/6njj7L9g/2/

片段：

$(document).ready(function() {
						   
	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').click(function(){
								  
		var toLoad = $(this).attr('href')+' #content';
		$('#content').hide('fast',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
		function loadContent() {
			$('#content').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#content').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
		
	});

});

.treeLink{
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

<!-- Sidebar Menu -->
<section>
<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><span class="treeLink">Link in level 2</span></li>
      <li><span class="treeLink">Link in level 2</span></li>
    </ul>
  </li>
</ul><!-- /.sidebar-menu -->

Answer 3

如果您不希望点击它，请点击href=""而不是href="#"。