Jquery селектора

Question

я получил следующую структуру: - вложенные UL

<ul> 
<li>Category 1 
    <ul> 
     <li> Category 1.1</li> 
     <li> Category 1.2</li> 
     <li> Category 1.3</li> 
    </ul> 
</li> 
<li> Category 2 
    <ul> 
     <li>Category 2.1</li> 
     <li>Category 2.2</li> 
     <li>Category 2.3</li> 
    </ul> 
</li> 
<li>Category 3 
    <ul> 
     <li>Category 3.1</li> 
     <li>Category 3.2</li> 
     <li>Category 3.3</li> 
    </ul> 
</li> 

Я применил правило с помощью CSS:

ul{ 
    list-style: none; 
    padding:0; 
    margin:0; 
} 
ul ul{ 
    display:none; 
} 

, который оставляет только основную категорию, как показано.

То, что я пытался сделать, всякий раз, когда пользователь нажимает на категорию 1/2/3, будет видна его <ul>. Я попробовал этот код:

$(document).ready(function() { 

    $("ul li").click(function() { 
     $(this + "ul").Slidedown(800); 
    }); 

}); 

хорошо, в основном я пытался выбрать <ul элемент, который был внутри главного <ul>.

Любая идея, как это сделать?

Заранее благодарен!

Answer 1

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

$(document).ready(function() { 

    $("ul li").click(function() { 
     $(this).find('ul').Slidedown(800); 
    }); 

}); 

Учитывая ваш селектор, нажмите на Category 1.1 также вызовет обратный вызов, но он ничего не будет делать, так как он не имеет никаких ul меток. Тем не менее, лучше добавить class и привязать событие только к ним.

Answer 2

что-то, как это должно работать

$(document).ready(function() { 

    $("ul > li").click(function() { 
     $(this).find("> ul").Slidedown(800); 
    }); 

}); 

Хотя еще более эффективный подход (благодаря Яну) будет:

$(document).ready(function() { 

    $("ul").children('li').click(function() { 
     $(this).children("ul").Slidedown(800); 
    }); 

}); 

с помощью «>» оператор говорит JQuery только ищет прямые дети, если вы не используете '>', код будет применяться к элементам li внутри вложенной ul. также прочитайте другие ответы на вопросы об использовании этого «правильно».

Answer 3

this не является строкой, это элемент DOM.

Вместо $(this + "ul"), вы хотите $('ul', this).

P.S. .Slidedown должно быть .slideDown.

Answer 4

$(this).find('ul:hidden').slideDown(800); 

Answer 5

Вы конкатенация элемента DOM с "ul" в строку - это не действительный селектор. Вместо этого используйте .find(), чтобы применить селектор ul в контексте текущего элемента.

$(document).ready(function() { 
    $("ul li").click(function() { 
     $(this).find('ul').Slidedown(800); 
    }); 
}); 

И возможно сделать селектор ul li немного более конкретными, чтобы соответствовать только внешние элементы списка.