Question

我想为4个不同的按钮显示4个不同的div。因此，当uesr单击特定链接时，将显示特定的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>

My Divs：

    <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。

问题

当我点击我的链接时，1比1，它们都显示正常。但是，如果我点击任何其他链接开始，它总是显示第一个div（＃ad1）。当我想要隐藏它们时，这是相同的，如果我再次点击它们中的任何一个，它会隐藏另一个div。我必须有一个明显的步骤！请帮忙:(

Answer 1

而不是使用所有id，而是使用一个类。然后在链接中添加data-slid-id，即应向下滑动或向上滑动的ID。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

由于我使用的是Bootstrap，我使用的是具有col-3宽度（类）的相同div，然后我隐藏了使用id＃ad1等，当它被隐藏时，它没有宽度，所以当我打电话给第二，第三或第四个div，他们在开始时显示，因为没有任何东西将div放到他们的位置，因为其他人没有宽度！这不是一个jQuery问题，只是简单的Bootstrap / HTML :( 对不起，谢谢大家的回答！

jQuery：slideDown（）显示错误的div

2 个答案: