jQuery：slideDown() 显示错误的 div答案

【问题标题】：jQuery: slideDown() showing wrong divsjQuery：slideDown() 显示错误的 div
【发布时间】：2015-10-22 14:12:46
【问题描述】：

我想为 4 个不同的按钮显示 4 个不同的 div。所以当用户点击特定链接时，会出现特定的div。这是我的 HTML：

链接：

    <div class="col-md-3 text-center">
    <a id="clickme1">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme2">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme3">I'm Interested</a>
    </div>

    <div class="col-md-3 text-center">
    <a id="clickme4">I'm Interested</a>
    </div>

我的 Div：

    <div class="col-md-3 text-center" id="ad1">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad2">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad3">
    <p>Show Table Here</p>
    </div>

    <div class="col-md-3 text-center" id="ad4">
    <p>Show Table Here</p>
    </div>

我的 jQuery：

$("#clickme1").click(function () {
    if ($("#ad1").is(":hidden")) {
        $("#ad1").slideDown("slow");
    } else {
        $("#ad1").hide();
    }
});

// Ad 2
$("#clickme2").click(function () {
    if ($("#ad2").is(":hidden")) {
        $("#ad2").slideDown("slow");
    } else {
        $("#ad2").hide();
    }
});

// Ad 3
$("#clickme3").click(function () {
    if ($("#ad3").is(":hidden")) {
        $("#ad3").slideDown("slow");
    } else {
        $("#ad3").hide();
    }
});

//Ad 4
$("#clickme4").click(function () {
    if ($("#ad4").is(":hidden")) {
        $("#ad4").slideDown("slow");
    } else {
        $("#ad4").hide();
    }
});

在我的 CSS 中，所有 4 个 div 都有属性 display:none。

问题

当我逐个单击链接时，它们都显示正常。但是，如果我单击任何其他链接开始，它总是显示第一个 div (#ad1)。当我想隐藏它们时也是如此，如果我再次单击它们中的任何一个，它会隐藏另一个 div。我必须有一个明显的步骤！请帮忙:(

【问题讨论】：

你能不能放个jsfiddle，我看看
1.当你点击链接时，你必须防止默认行为：e.preventDefault();+ 你的代码太大并且复制粘贴 -> 尝试在 JS 中使用其他选择器/方法...

标签： jquery html css

【解决方案1】：

与其制作所有ids，不如使用一个类。然后在链接中添加data-slid-id，即应该向下或向上滑动的id。

添加额外的链接和表格时，不需要额外的功能。

$(function() {
  $('#ad1,#ad2,#ad3,#ad4').hide();
  $('.clickme').on('click',function() {
      $('#'+$(this).data('slide-id')).slideToggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad1">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad2">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad3">I'm Interested</a>
</div>

<div class="col-md-3 text-center">
    <a class="clickme" data-slide-id="ad4">I'm Interested</a>
</div>



<div class="col-md-3 text-center" id="ad1">
    <p>Show Table Here 1</p>
</div>

<div class="col-md-3 text-center" id="ad2">
    <p>Show Table Here 2</p>
</div>

<div class="col-md-3 text-center" id="ad3">
    <p>Show Table Here 3</p>
</div>

<div class="col-md-3 text-center" id="ad4">
    <p>Show Table Here 4</p>
</div>

【讨论】：

【解决方案2】：

自从我使用 Bootstrap 以来，我使用的是具有 col-3 宽度（类）的相同 div，然后我使用 id #ad1 等隐藏它，当它被隐藏时，它没有宽度，所以当我在调用第 2、3 或 4 个 div，它们在开始时显示，因为没有任何东西可以将 div 对齐到它们的位置，因为其他 div 没有宽度！这不是 jQuery 问题，只是简单的 Bootstrap/HTML :( 很抱歉，谢谢大家的回答！

【讨论】：