Javascript 滑动切换已单击父对象的子类

我想循环浏览页面标题中的每个div，将click函数应用于匹配标题的每个div。然后，如果单击标题，它将滑动切换标题的子类

所以，若我点击heading_about heading，它会滑动切换菜单_about child class

我错过了什么

<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
});

尝试在this.id前面添加，并在本例中使用类幻灯片以菜单为目标：

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

---

这可以通过不同的选择器实现您所需的功能。你把问题复杂化了

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

我建议您将其用于链接，并添加“停止”以防止动画排队

这：

或者这个：

$("#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)
});

---

会有用的。顺便说一句，你不应该把链接环绕在段落周围。

你可以使用与选择标题部分相同的技巧，使用$this。使用以“menu”开头的类查找并选择子级：

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

$this.id被转换为$heading_about，它不是有效的选择器

假设子级的类将采用menu_u+div的id格式，而不使用heading_about to class menu_about等单词heading id，那么您可以执行以下操作：

$("#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)
});

或

---

我不想滑动切换标题。我想滑动切换孩子的班级啊，很公平，跳了，因为我看到了一个即时问题=P。更新了答案。谢谢。1为什么我不应该将链接环绕？2“$this.find'div”很好，但是如果我想向父级添加其他不应该更改的div呢？我怎样才能指定只有带有menu_uu类的子菜单才应该被修改？1在HTML5之前它是无效的，2您可以使用类、jQuery选择器等以多种方式将其作为目标。我只是基于您的示例。为什么我必须这样做。id.replace？尽管所有隐藏的menu div最好使用相同的类作为示例，.menu，然后您可以使用选择器：`$this.find'div.menu'@Growler，因为您要查找具有特定类的div，对吧，每个菜单的类根据您的代码而不同，格式菜单是div中id的一部分。因此，如果id heading\u about中有一个div，其中包含一个menu\u about类，您必须将单词标题替换为单词菜单，才能找到具有正确类的div。

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

$("#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)
});

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

$("#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");      
}
});