jQuery slideToggle nested ul li

Question

У меня была эта работа изначально, но она запускалась через валидатор W3C, исправлялась ошибки и теперь она не работает.

У меня настроить jsfiddle

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

Но так как вложенные ульки внутри ли не работают, попробовали селектора, такие как дети/братья/сестры/рядом - все это безрезультатно. Это не значит, что они не сработают, просто я не понимаю достаточно, чтобы заставить их работать (ясно!).

Этот код делает все списки слайдов одновременно, однако я хочу управлять ими индивидуально.

$(function(){ 
    $("ul.featureListings").hide(); 

    $(".featuresHeading").click(function() { 
    $('ul.featureListings').slideToggle(300); 
    return false; 
    }); 
}); 

Я уверен, используя что-то вроде:

$(this).next('.featureListings').slideToggle(300); 

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

Как можно настроить таргетинг на соответствующую улицу? Интересно, может ли кто-нибудь помочь пролить некоторый свет и помочь мне понять, почему это не работает, пожалуйста?

Answer 1

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

$(function(){ 
    $("ul.featureListings").hide(); 

    $(".featuresHeading").click(function() { 
    $(this).next("li").children('ul.featureListings').slideToggle(300); 
    return false; 
    }); 
}); 

Вам просто нужно пройти через DOM в правильном направлении .. Вы хотите, чтобы перейти на следующий Li (.next («Ли»)), то в одном из своих детей (.children ('ul.featureListings')) и запускать slideToggle.

Answer 2

Использование .next()

$(this).next().find('ul.featureListings').slideToggle(300); 

Демо здесь http://jsfiddle.net/heE6J/4/

Answer 3

$(function(){ 
    $("ul.featureListings").hide(); 

    $(".featuresHeading").click(function() { 
    $('ul.featureListings', $(this).next()).slideToggle(300); 
    return false; 
    }); 
}); 

Answer 4

Я сделал jsfiddle все, что я понял. думаю. Вы хотите, чтобы slideToggle со следующим и предыдущим закрытием по открытию тока. Я также сделал изменение на странице html.

$("ul.featureListings").hide(); 

    $(".featuresHeading").click(function() { 
     $('ul.featureListings').not($(this).children('ul.featureListings')).slideUp(); 
    $(this).children('ul.featureListings').slideToggle(300); 
    return false; 
    });