как что-то сделать, если у элемента есть братья и сестры

у меня есть неупорядоченный список как левая навигация с несколькими ссылками в нем. большинство элементов списка имеют другой неупорядоченный список в качестве подменю, связанного с ними. однако у некоторых ссылок нет подменю. я хочу отключить поведение щелчка по умолчанию для ссылок, у которых есть подменю, чтобы я мог открыть анимацию подменю. но на ссылках без подменю мне нужно, чтобы ссылка была кликабельной. javascript, который я должен сделать, это:

$(function(){
    if($("#leftNav ul:first > li > a").siblings().size() > 0){
        $("#leftNav ul:first > li > a").click(function(e){
            e.preventDefault();
        });
    }

проблема в том, что это отключает поведение щелчка по умолчанию для всех ссылок, а не только для тех, у которых есть одноуровневые ссылки. html для левой навигации выглядит так

<div id="leftNav">
    <ul>
        <li>
            <a href="#">Link 1</a>
            <ul>
                <li><a href="#">Submenu Link 1</a></li>
                <li><a href="#">Submenu Link 2</a></li>
                <li><a href="#">Submenu Link 3</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a></li>
     </ul>
</div>

таким образом, поведение щелчка должно быть удалено на Ссылке 1, потому что у него есть <ul> в качестве родственного элемента. Link 2 не имеет братьев и сестер, поэтому его следует оставить в покое.


javascript jquery siblings
person heymrcarter    schedule 27.12.2010    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Один из способов сделать это — найти те li элементы, у которых есть потомок ul, и в этом li найти a и нацелить их:

$('#leftNav li:has("ul")').find('a').each(
    function(){
        $(this).click(
            function(){
                alert("No clicking here");
                return false;
            });
    });

демонстрация JS Fiddle.

Отредактировано, чтобы добавить пересмотренный jQuery:

$('#leftNav li:has("ul")').find('a').each(
    function(){
        $(this).click(
            function(){
                alert("No clicking here");
                return false;
            });
    });
$('#leftNav li:has("ul")').hover(
    function(){
        $(this).find('ul').slideDown();   
    },
    function(){
        $(this).find('ul').slideUp();
    });

Чуть более полезная демонстрация JS Fiddle.

person David says reinstate Monica    schedule 27.12.2010

arrow_upward
3
arrow_downward

Самый простой способ:

$("#leftNav ul:first > li > a").not(":only-child").click(function(e){
        e.preventDefault();
});
person Chuck    schedule 27.12.2010
comment
но все еще может нажимать на ссылки ul. - person A_Var; 28.12.2010

arrow_upward
1
arrow_downward

У меня недостаточно высокая оценка репутации, чтобы комментировать, но я просто хотел сказать, что ответ Чака отлично сработал для меня (ИСКЛЮЧАЯ В FIREFOX?). Мое меню также скрывает другие открытые меню перед открытием того, которое вы щелкнули - вот код, который я использовал:

jQuery(document).ready(function($) { 
     $('ul.menu li ul.sub-menu').hide(); //Hide children by default

     $("ul.menu:first > li > a").not(":only-child").click(function(){
            event.preventDefault();
            $(this).parent().siblings().children('ul.menu li ul.sub-menu').css('display','none');
            $(this).siblings('.sub-menu').slideToggle(800);
       });
});
person user3228504    schedule 23.01.2014

arrow_upward

arrow_downward

person    schedule
comment
Возможно, вам захочется быстро напомнить, как форматировать код в ответах: Справка Stackoverflow Markdown. - person David says reinstate Monica; 28.12.2010
comment
Я думаю, что не заметил, что код не был отформатирован, когда публиковал ответ. Спасибо. - person Chandu; 28.12.2010
comment
Вообще не беспокойтесь =) тоже +1 за ответ - person David says reinstate Monica; 28.12.2010