Создание родительской ссылки unclickable в раскрывающемся меню с jQuery

Question

У меня есть раскрывающееся меню, которое динамически добавляется через WordPress. Это выглядит следующим образом:

Pictures 
    Sea 
    Forest 
    City 

«Море», «Лес» и «Сити» категория с «картинкой» в качестве родительской категории.

Мой вопрос:

Как мне сделать категорию "Pictures" unclickable?

Я сделал это с JQuery:

$(document).ready(function(){ 
    //Make parent links unclickable 
    $(".page-item-3").click(function(){ 
     return false; 
    }); 
}); 

... и это с помощью CSS:

li.page-item-3 a { 
    cursor:default; 
} 

.page-item-3 ul li a { 
    cursor: pointer; 
} 

Разметка выглядит следующим образом:

<div id="menu" class="jqueryslidemenu"> 
    <ul> 
     <li class="cat-item cat-item-1 current_page_item"><a href="http://blabla" title="Blabla">Blabla</a></li> 
     <li class="page_item page-item-2"><a href="http://blabla" title="Blabla">Blabla</a> 
      <ul> 
       <li class="page_item page-item-28"><a href="http://blabla" title="Blabla">Blabla</a></li> 
       <li class="page_item page-item-30"><a href="http://blabla" title="Blabla">Blabla</a></li> 
       <li class="page_item page-item-39"><a href="http://blabla" title="Blabla">Blabla</a></li> 
      </ul> 
     </li> 
     <li class="page_item page-item-3"><a href="http://blabla" title="Blabla">Blabla</a> 
      <ul> 
       <li class="page_item page-item-5"><a href="http://blabla" title="Blabla 1">Blabla 1</a></li> 
       <li class="page_item page-item-7"><a href="http://blabla" title="Blabla 2">Blabla 2</a></li> 
       <li class="page_item page-item-9"><a href="http://blabla" title="Blabla 3">Blabla 3</a></li> 
       <li class="page_item page-item-11"><a href="http://blabla" title="Blabla 4">Blabla 4</a></li> 
       <li class="page_item page-item-13"><a href="http://blabla" title="Blabla 5">Blabla 5</a></li> 
      </ul> 
     </li> 
     <li class="page_item page-item-15"><a href="http://blabla" title="Blabla">Blabla</a> 
      <ul> 
       <li class="page_item page-item-222"><a href="http://blabla" title="Blabla">Blabla</a></li> 
       <li class="page_item page-item-224"><a href="http://blabla" title="Blabla">Blabla</a></li> 
       <li class="page_item page-item-226"><a href="http://blabla" title="Blabla">Blabla</a></li> 
      </ul> 
     </li> 
     <li class="page_item page-item-17"><a href="http://Blabla" title="Blabla">Blabla</a></li> 
     <li class="page_item page-item-36"><a href="http://Blabla" title="Blabla">Blabla</a></li> 
    </ul> 
</div> 

Это почти работает Но Код jQuery делает все раскрывающиеся ссылки незаметными.

Было бы здорово, если бы кто-нибудь знал, как удалить URL-адрес строки состояния, наведите указатель мыши на ссылку «Картинки». Но я не думаю, что это можно сделать в современных браузерах, таких как Safari och Firefox?

Спасибо!

Answer 1

Я не знаю, что у вас контроля из-за Wordpress, но вы с этой проблемой, потому что все содержится в элементе списка заголовков (страница-пункт-3) и вы отменяете клик по этому элементу. Если вы можете применить класс к самой ссылке, вы можете напрямую применить jQuery к этому.

К сожалению, вы не можете сказать «.page-item-3 a», потому что это применимо ко всем ссылкам в списке.

Re-Edit - Это должно выбрать первую ссылку в списке и отменить ее значение. Возможно, вам потребуется применить это для каждой имеющейся у вас ссылки «title».

$(".page-item-3 a:first").click(function() { 
    return false; 
} 

Answer 2

просто замените значение атрибута href на #. Таким образом, когда пользователь нажимает на нее, страница переходит на #, которая является той же страницей, на которой они находятся, и ничего не происходит. Сохраните написанный CSS, чтобы указатель руки не появлялся при их зависании, но удалял код jQuery.

Использование JQuery:

$(".page-item-3>a").attr("href", "#") 

Answer 3

Попробуйте это:

$(document).ready(function(){ 
    //Make parent links unclickable 
    $("div > ul > li > a").click(function(){ 
     return false; 
    }); 
}); 

Это отключит все первые ссылки в списке без необходимости имя класса.

Answer 4

Я использую это:

$j = jQuery.noConflict(); 
$j(document).ready(function(){ 
    //Make parent links unclickable 
    $j("div[id='nav'] > ul > li > a ").removeAttr("href"); 
}); 

Answer 5

$(".page-item-3").children("a").click(function(e) { 
    e.preventDefault(); 
}); 

***** или с помощью CSS *****

.unclickable { 
    z-index:-1; 
} 


$(".page-item-3").children("a").addClass("unclickable");