Jquery 滑动切换功能单独工作

我的问题是关于jQuery及其slideToogle（）函数的。我试图在一个页面上多次使用这个函数，我想知道是否有可能在这个函数中包含一个div ID或类

$(document).ready(function(){
          $("class or div").click(function(){
            $("class or div").slideToggle("fast");
          });
}); 

我的目标是有几个div，当我点击它们时，它们将分别展开/关闭。当我将所有div设置为class时（假设第一个div的class是

class=“class”

，应该移动的div的class是

class=“div”

），当我点击我的

时，每一个

都会展开

$(document).ready(function(){
          $(".class").click(function(){
            $(".div").slideToggle("fast");
          });
}); 

我试图绕过这个问题，但我（到目前为止）唯一的工作代码是

$(document).ready(function(){
      $("#class1").click(function(){
        $("#div1").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#class2").click(function(){
        $("#div2").slideToggle("fast");
      });
    });

    $(document).ready(function(){
      $("#class3").click(function(){
        $("#div3").slideToggle("fast");
      });
    });

是否真的有必要使用这么多行代码（特别是当Iam计划使用超过15行这样的DIV时）

谢谢你的帮助

我的HTML：

<img class="prace" src="images/kresby/lambo.jpg">
<div id="flip1"> 1. Lamborghini Gallardo Superleggera</div>
<div id="panel1">Lamborghini Gallardo Superleggera</div>

<img class="prace" src="images/kresby/corvette.jpg">
<div id="flip2">TOGGLE</div>
<div id="panel2">TEXT</div>

<img class="prace" src="images/kresby/bumblebee.jpg">
<div id="flip3">TOGGLE</div>
<div id="panel3">TEXT</div>
.
.
.

我的CSS：

#flip1,#flip2,...{
    width: 80%;
    margin: 0 auto;
    padding:10px;
    text-align:center;
    background-color: #191919;
    border-radius:10px;
    margin-bottom: 5px;
}

#panel1,#panel2...{
    text-align: center;
    background: url("images/b.PNG"); ;
    display:none;
    padding: 50px;
    border-radius: 5px;
    border: 1px ridge #ffff66;
}

---

如果可能，要将第二个

移动到第一个

中，您可以这样做：

<div class="flip">Headline 1
  <div class="sub">Desciption</div>
</div>

<div class="flip">Headline 2
  <div class="sub">Desciption</div>
</div>

您应该在事件中使用$（this）仅滑动触发事件的特定元素，而不是滑动具有相同类的所有元素

根据HTML结构，还可以使用next（）

如果您对id为“flip1”、“flip2”等的所有div使用一个公共类，可能会更好，可以使用一个名为“flip”的类

然后，您可以简单地使用以下内容：

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next().slideToggle();
  });
});

向元素添加类
flip
和
panel

<img class="prace" src="images/kresby/bumblebee.jpg">
<div id="flip3" class="flip">TOGGLE</div>
<div id="panel3" class="panel">TEXT</div>

我个人会选择悬停效果。代码的实际部分是切换内容，我将把它们保存在函数中，然后使用hover传递ID

JS:

$(document).ready(function(){
    function makeThemToggle(toggleID, nextDivID){
        $("#"+toggleID).click(function(){
            $("#"+nextDivID).slideToggle("fast");
        });
    }

    var nextDiv = '';

    $("#flip1").hover(function(){
        nextDiv = ($("#flip1").next().attr('id'));
        makeThemToggle('flip1',nextDiv);
    });

    $("#flip2").hover(function(){
        nextDiv = ($("#flip2").next().attr('id'));
        makeThemToggle('flip2',nextDiv);
    });

    $("#flip3").hover(function(){
        nextDiv = ($("#flip3").next().attr('id'));
        makeThemToggle('flip3',nextDiv);
    });

});

工作小提琴：

但是要小心：这样，与悬停一起使用的切换效果会非常明显，可能会涉及2到3个元素切换实例
 在为每个翻转添加一个类后，也可以像这样使用
each（）
：

$(document).ready(function(){
    $(".flip").each(function(){
      $(this).click(function(){
        $(this).next().slideToggle("fast");
      });
    });
 });

您能否共享html示例，以便我们可以看到类和div元素之间的关系
div
元素是
class
元素的子元素还是兄弟/下一个元素etcNo需要
$（document）.ready（function（）{
每次，只保留一次，然后你就可以把你的代码放在里面了。这是一个有用的注释伙伴！谢谢。
<img class="prace" src="images/kresby/bumblebee.jpg">
<div id="flip3" class="flip">TOGGLE</div>
<div id="panel3" class="panel">TEXT</div>

$('.flip').click(function(){
    $(this).next('.panel').toggle()
})

$(document).ready(function(){
    function makeThemToggle(toggleID, nextDivID){
        $("#"+toggleID).click(function(){
            $("#"+nextDivID).slideToggle("fast");
        });
    }

    var nextDiv = '';

    $("#flip1").hover(function(){
        nextDiv = ($("#flip1").next().attr('id'));
        makeThemToggle('flip1',nextDiv);
    });

    $("#flip2").hover(function(){
        nextDiv = ($("#flip2").next().attr('id'));
        makeThemToggle('flip2',nextDiv);
    });

    $("#flip3").hover(function(){
        nextDiv = ($("#flip3").next().attr('id'));
        makeThemToggle('flip3',nextDiv);
    });

});

$(document).ready(function(){
    $(".flip").each(function(){
      $(this).click(function(){
        $(this).next().slideToggle("fast");
      });
    });
 });