Question

我想循环遍历pageHeadings中的每个div，将click函数应用于匹配＆＃34; heading的每个div。＆＃34;然后，如果我点击一个标题，它将会滑动切换标题的子类。

因此，如果我点击heading_about标题，则会滑动切换menu_about子类。

我错过了什么？

<div id="pageHeadings">
    <div id="heading_practice">                     
        <a href="#">
           <p>Practice Areas</p>
        </a>
        <div class="menu_practice">
           <p>test</p>
           <p>test2</p>
        </div>
    </div>
    <div id="heading_about">                        
        <a href="#">
           <p>About</p>
        </a>
        <div class="menu_about">
           <p>test</p>
           <p>test2</p>
        </div>
    </div>
 </div>

$("#pageHeadings div[id^=heading]").click(function () { //apply click function to all headings
    $('#' + this.id).children().slideToggle("fast"); 
   //should show child class (click heading_about, it shows menu_about)
   //instead shows child class, but also toggles heading
});

Answer 1

您可以使用与选择标题部分相同的技巧，使用$(this).find并选择具有以＆＃39;菜单开头的课程的孩子：

$("#pageHeadings div[id^=heading]").click(function() {
    $(this).find('[class^=menu]').slideToggle("fast");
});

Answer 2

尝试在#前添加this.id并使用课程（本例中为slide）定位您的菜单：

$('#' + this.id + ' .slide').slideToggle("fast");

Fiddle

Answer 3

这可以用不同的选择器做你想要的。你的问题太复杂了。

$('#pageHeadings > div').click(function(){
    $(this).children('div').slideToggle('fast');
});

我建议您将其用于链接，并添加stop以防止动画排队。 jsfiddle

$('#pageHeadings > div > a').click(function(){
    $(this).parent('div').children('div').stop(true, true).slideToggle('fast');
});

Answer 4

此：

$("#pageHeadings div[id^=heading]").click(function () { //apply click function to all headings
    $('div', this).slideToggle("fast"); //show child class (click heading_about, it shows menu_about)
});

<强> jsFiddle example

或者这个：

$("#pageHeadings div[id^=heading]").click(function () { //apply click function to all headings
    $(this).find('div').slideToggle("fast"); //show child class (click heading_about, it shows menu_about)
});

会奏效。顺便说一句，你不应该在段落中包装链接。

Answer 5

$(this.id)被翻译为$("heading_about")，这不是有效的选择器。

假设孩子的班级将采用＆＃34; menu _＆＃34;的格式。 + div没有单词＆＃34;标题＆＃34; （ID为＆＃34; heading_about＆＃34; to class＆＃34; menu_about＆＃34;等），那么你可以这样做：

$("#pageHeadings div[id^=heading]").click(function () { //apply click function to all headings
    // take the parent div's id, replace "heading" with "menu" and use that as
    // the class selector for the menu.
    var childClass = this.id.replace("heading", "menu")
    $(this).find('div.' + childClass).slideToggle("fast"); //show child class (click heading_about, it shows menu_about)
});

http://jsfiddle.net/5nKfX/

Answer 6

$("#pageHeadings div[id^=heading]").click(function () { //apply click function to all headings
    $('#' + this.id).children("[class^=menu]").slideToggle("fast"); 
});

JSFiddle of it

或

$("#pageHeadings div[id^=heading]").click(function () { //apply click function to all headings     
if($('#' + this.id).children("[class^=menu]").length) {
    $('#' + this.id).children("[class^=menu]").slideToggle("fast");      
}
});

SlideToggle点击父级的子类

6 个答案: