Clickable li but another li not clickable

Question

I'm trying to figure this out, but for the life of me I'm confused. I have this:

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

and my 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(){

and I'm having trouble with this line:

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

I want the sidebar-menu menu clickable for all li 's with a tags however when I click on the treeview menu, it fires up as an href link. I don't want that clickable.

Am I using the greater than less than symbols correctly in my JavaScript?

Answer 1

use this to prevent default href action

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

edit: or you can handle all # links with this selector and preventDefault

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

selector a[href="#"] will select only A-tags with param href == "#", then just use preventDefault() on them to stop default href action

Answer 2

If you want only elements directly under your selector, use > . This will select only a tags directly in the li tags that are directly in the sidebar-menu :

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

Your first onclick can look like this:

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

Your second one can just look like this:

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

It depends on how much nesting you'll do, but this will apply to all a tags in your treeview, regardless of nesting level.

EDIT : I see you didn't want the tree clickable at all. In that case, you shouldn't use the a tag at all. Use something like a span with styling that makes it look like a link. Links ( a ) go somewhere. If you aren't going somewhere, don't use the a .

fiddle: https://jsfiddle.net/6njj7L9g/2/

snippet:

 $(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="#" 。