使用与按钮ID

Question

我一直在尝试制作它，以便每当我点击div内部时 id="slide$i"被点击的div应该展开或折叠，具体取决于当前的形式。

这是它的样子截图。

所以基本上如果我点击第一个区域（从Magazijn到Guidion） 它应该扩展并显示其他信息。但是我们现在要保持简单，只是试着让div移动。

我的代码是这样的。

  $i = 0;
foreach($stock_history as $history){
    echo " 
    <div id='slide" . $i . "' >
        <p>Date: <strong> " . $history->create_date . "</strong> </p> 
        <p>To: <strong> " . $history->toLocation->name . " </strong> </p> 
        <p>From: <strong> " . $history->fromLocation->name . " </strong> </p>
        <p>Moved by:  <strong> " .  $history->user->username . " </strong> </p>
        <hr />
    </div>";
    $i++;
};

使用Javascript：

$("#slide'.$i.'").click(function(){
    if ($("#slide'.$i.'").is(":hidden")) {
        $("#slide'.$i.'").show("slow");
    } else {
        $("#slide'.$i.'").slideUp();
    }
});

结论：

我想点击一个div（例如id = 1），那个div应该打开/关闭。

Answer 1

在你的div中使用一个类

$i = 0;
foreach($stock_history as $history){
    echo " 
    <div id='slide" . $i . "' class='slide-class'>
    <p>Date: <strong> " . $history->create_date . "</strong> </p> 
    <p>To: <strong> " . $history->toLocation->name . " </strong> </p> 
    <p>From: <strong> " . $history->fromLocation->name . " </strong> </p>
    <p>Moved by:  <strong> " .  $history->user->username . " </strong> </p>
    <hr />
    </div>";
    $i++;
}

和JS

$(".slide-class").click(function(){
    var current_id = this.id
    if ($("#"+current_id).is(":hidden")) {
        $("#"+current_id).show("slow");
    } else {
    $("#"+current_id).slideUp();
    }
  });

Answer 2

我建议您为每个幻灯片提供效果的通用类名，并将其用作toggleClass()其他类的触发器，以处理元素的实际状态。

如果每个元素都有一个默认类.product-slide，你可以使用jQuery来切换另一个类：

$('.product-slide').off('click.prod-slide').on('click.prod-slide', function() {
    $(this).toggleClass('specified-class');
});

然后在你的CSS中你可以让.specified-class用CSS操纵里面的所有孩子。

这使您可以自由地使用CSS过渡而不是速度慢得多的非硬件加速JS;）（在3d过渡的情况下 - 您可以强制使用它）

在click处理程序上，您可以看到我的event被.拆分。这只是事件命名空间。避免与绑定到同一元素的多个处理程序发生冲突;）

希望这对你有所帮助。祝你好运！