javascript - jQuery 折叠 Bootstrap 和 jQuery 幻灯片

Question

我有一个包含 4 行和 2 列的页面，每一行中都有一个 bootstrap Accordion ，另一列中有一个图像。单击标题时， Accordion 打开(bootstrap 折叠)，并且带有图像的隐藏 div 显示在已经可见的图像下方(幻灯片 jQuery)。

因此，只需单击 2 个 div( Accordion 体+隐藏的 div)，当我为 Accordion 使用不同的 id 时，这适用于所有 4 个 Accordion ，但它们保持打开状态。

当我对 Accordion 使用相同的 id 来关闭 Accordion 主体时，我遇到了问题。

jquery slide 可能需要一个 noConflict 和一个 click 函数(onClick 不是我在某处读到的方法)和另一个 else 语句。

我想要的是，无论您单击哪个标题都没有关系，只有单击的 Accordion 打开 + 显示图像的隐藏 div。

有没有人......谁可以提供帮助。

function slide(slides) {
 $('.slidepic').each(function(index) {
      if ($(this).attr("id") == slides) {
           $(this).slideDown(200);
      }
      else {
           $(this).slideUp(200);
      }
 });
}

页面的 2 行版本在这里:http://jsfiddle.net/SUpmn/1/

Answer 1

试试这个:

http://jsfiddle.net/SUpmn/4/

意味着，通过 jquery click-Event-Handler 获得了点击。不要使用 javascript:uglyFunction()

$('.accordion-heading').click(function (){
$('.slidepic').each(function (index) {
    if ($(this).attr("id") == slides) {
        $(this).slideDown(200);
    } else {
        $(this).slideUp(200);
    }
});
});
}