Javascript 每个下拉选项内的手风琴内容不起作用

我试图在每个下拉列表中创建一个手风琴，但它不能正常工作。在第一个下拉选项中显示每个下拉选项的所有手风琴，如果我选择另一个下拉选项，则单击手风琴时无法打开它。如何解决这个问题

这是我的建议

---

刚刚将jquery

$（'#accordion faq'）.find（'.accordion faq toggle'）

更改为

$（'#accordion faq.accordion faq toggle'）

，它的工作对我来说很好

编辑： 更改了

$（'#faqdrodown'）。更改（）

切换类

隐藏的函数
并在该类上添加了css，用于隐藏内容和onload以隐藏其他faq块，我添加了一些js代码


$（函数（）{
$（'.FAQ'）.addClass（'hide'）；
$（'#'+$（'#faqdrodown'）.val（））.removeClass（'hide'）；
$（'#faqdrodown'）。更改（函数（）{
$（'.FAQ'）.addClass（'hide'）；
$（'#'+$（this.val（））.removeClass（'hide'）；
});
$（“#accordion faq.accordion faq toggle”）。单击（函数（）{/*展开或折叠此面板*/
$（this）.next（'.acordionfaq content'）.slideToggle（'fast'）；
$（“.accordionfaq内容”）.not（$（this.next（））.slideUp（'fast'）；
});
});
.faq下拉列表{
位置：相对位置；
显示：块；
边缘顶部：0.5em；
填充：0；
}
.faq下拉列表选择{
宽度：100%；
保证金：0；
背景：无；
边框：1px实心透明；
大纲：无；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
外观：无；
-webkit外观：无；
字号：1.25em；
颜色：#444；
填充物：6em 1.9em.5em.8em；
线高：1.3；
}
.faq下拉列表：：之后{
内容：“；
位置：绝对位置；
宽度：9px；
高度：8px；
最高：50%；
右：1em；
利润上限：-4px；
z指数：2；
背景：url（“数据：image/svg+xml；charset=utf8，%3Csvg xmlns=”http://www.w3.org/2000/svg'viewBox='0 16 12'%3E%3C多边形填充='rgb（102102102）'points='8,12 0,0 16,0'/%3E%3C/svg%3E'）0 0 0不重复；
指针事件：无；
}
/*这将隐藏IE 10/11+中的本机下拉按钮箭头，因此它将具有自定义外观，IE 9及更早版本将获得本机选择*/
@媒体屏幕和（-ms高对比度：激活），（-ms高对比度：无）{
.faq下拉列表选择：--ms展开{
显示：无；
}
/*删除IE 10/11中文本后面的奇怪蓝色背景颜色，并将文本设置为与焦点样式文本匹配*/
选择：焦点：：-ms值{
背景：透明；
颜色：#222；
}
}
/*Firefox7+--允许我们隐藏箭头，但不一致（见下面的FF 30评论）。我们发现在FF中隐藏本机样式的最简单方法是使select大于其容器*/
/*下面使用的特定FF选择器成功覆盖了先前关闭自定义图标的规则；我们尝试过的其他FF hacky选择器，如“*>。dropdown:：after”，没有撤消以前的规则*/
/*设置溢出：隐藏在包装上以剪裁本机选择的箭头，这也会剪裁轮廓，因此焦点样式在FF中不太理想*/
_：-moz进度条，正文：最后一个子项。下拉列表{
溢出：隐藏；
}
/*仅显示自定义图标*/
_：-moz进度条，正文：最后一个子项。下拉列表：之后{
显示：块；
}
_：-moz进度条，正文：最后一个子项。下拉选择{
/*增加填充，为菜单图标腾出空间*/
右侧填充：1.9em；
/*带有这些文本缩进和文本溢出值的'window'外观将隐藏箭头FF，直到v30*/
-moz外观：窗口；
文本缩进：0.01px；
文本溢出：“”；
/*对于Windows 8上的FF 30+，我们需要使选择稍微长一点以隐藏本机箭头*/
宽度：110%；
}
/*起初，我们尝试使用以下规则在Windows8中的Firefox30+中隐藏本机选择箭头，但我们宁愿简化CSS并扩大FF所有版本的选择范围，因为这在该浏览器中是一个反复出现的问题*/
/*@supports（-moz外观：meterbar）和（背景混合模式：差异，正常）{
.下拉选择{宽度：110%；}
}   */
/*Firefox7+焦点样式-这解决了-moz外观：窗口关闭正常选择焦点的问题。使用半透明，因为轮廓不处理圆角*/
_：-moz进度条，正文：最后一个子项。下拉选择：焦点{
外形：2倍实心rgba（180222250.7）；
}
/*Opera-预闪烁禁用自定义箭头，使用本机选择按钮*/
x:-o-prefocus，.下拉菜单：：after{
显示：无；
}
/*悬停式*/
.faq下拉列表：悬停{
边框：1px实心#888；
}
/*焦点风格*/
选择：焦点{
大纲：无；
盒影：0 1×3×rgba（180222250，1）；
背景色：透明；
颜色：#222；
边框：1px实心#aaa；
}
/*Firefox focus在文本周围有奇怪的工件，这就扼杀了它*/
选择：-moz焦点{
颜色：透明；
文本阴影：0#000；
}
选择权{
字体大小：正常；
}
/*这些只是演示按钮y样式，您喜欢的样式*/
.faq下拉列表btn{
边框：1px实心#bbb；
边界半径：.3em；
盒影：0 1px 0 1px rgba（0,0,0,04）；
背景：#f3；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#ffffff 0%，#E5 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#ffffff）、颜色停止（100%、#e5））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#ffffff 0%，#E5 100%）；/*Chrome10+，Safari5.1+*/
背景：-o型线性梯度（顶部，#ffffff 0%，#E5 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#ffffff 0%，#E5 100%）；/*IE10+*/
背景：线性梯度（至底部，#ffffff 0%，#E5 100%）；/*W3C*/
}
.产出{
保证金：0自动；
填充：1em；
}
.手风琴常见问题解答切换{
光标：指针；
字体大小：1.1米；
字号：700；
文本对齐：左对齐；
边界半径：3px；
填充：19px 19px 19px 60px；
边框：1px实心#CCC；
长方体阴影：0.5pxRGBA（0,0,0,19），0.3px3px
$(function() {
  $('#faqDrodpown').change(function(){
    $('.faqs').hide();
    $('#' + $(this).val()).show();
  });

  $('#accordion-faq').find('.accordionfaq-toggle').click(function() { /*Expand or collapse this panel*/
        $(this).next().slideToggle('fast');
        $(".accordionfaq-content").not($(this).next()).slideUp('fast');
    });
});

$(function() {

  $('#faqDrodpown').change(function(){
    $('.faqs').hide();
    $('#' + $(this).val()).show();
    var data = $("#faqDrodpown").find("option:selected").val();
    $('#accordion-faq-'+data).find('.accordionfaq-toggle').click(function() { 
          $(this).next().slideToggle('fast');
          $(".accordionfaq-content").not($(this).next()).slideUp('fast');
      });
  });
});

<div id="accordion-faq-red">
<div id="accordion-faq-yellow">
<div id="accordion-faq-blue">