Clickable 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, он запускается как ссылка 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(); 
}); 

селекторных a[href="#"] будет выбрать только A-тег с парами HREF == "#", то просто используйте для них 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 теги в вашем древовидной структуре, независимо от уровня гнездования.

EDIT: Я вижу, что вы не хотите, чтобы дерево было доступно для просмотра. В этом случае вы не должны использовать тег a. Используйте что-то вроде span с стилем, что делает его похожим на ссылку. Ссылки (a) идут куда-то. Если вы куда-то не идете, не используйте a.

скрипку: https://jsfiddle.net/6njj7L9g/2/

сниппет:

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

 
\t $('.sidebar-menu > li > a').click(function(){ 
 
\t \t \t \t \t \t \t \t 
 
\t \t var toLoad = $(this).attr('href')+' #content'; 
 
\t \t $('#content').hide('fast',loadContent); 
 
\t \t $('#load').remove(); 
 
\t \t $('#wrapper').append('<span id="load">LOADING...</span>'); 
 
\t \t $('#load').fadeIn('normal'); 
 
\t \t window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); 
 
\t \t function loadContent() { 
 
\t \t \t $('#content').load(toLoad,'',showNewContent()) 
 
\t \t } 
 
\t \t function showNewContent() { 
 
\t \t \t $('#content').show('normal',hideLoader()); 
 
\t \t } 
 
\t \t function hideLoader() { 
 
\t \t \t $('#load').fadeOut('normal'); 
 
\t \t } 
 
\t \t return false; 
 
\t \t 
 
\t }); 
 

 
});

.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="#", если вы не хотите, чтобы быть в состоянии щелчка.