Question

我有3个锚标签，点击后我想在页面下方显示一个div。如果单击另一个锚标记，我想隐藏当前div（页面下方显示的div）。到目前为止，我的代码看起来像这样：

$(document).ready(function () {
$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').removeClass('hide');
});

text-show-1是被点击的内容，container-show-1是点击时显示的内容。

我在声明中尝试了我自己的if语句，它就像这样 - 但这不起作用。

$(document).ready(function () {
$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').removeClass('hide');
    if ($('.text-show-2').on('click', function () {
            $('.container-show-1').addClass('hide');
        }))
    if else($('.text-show-3').on('click', function () {
            $('.container-show-1').addClass('hide');
        }))
});

任何帮助将不胜感激。干杯！

Answer 1

您是否使用.show()，.hide()或.toggle()取决于您。请阅读jQuery documentation进行决定。

在功能方面，不要在其他点击事件中嵌套点击事件。它们永远不会运行，因为如果你点击第一个元素它们只能运行，但是你不能同时点击两个元素 - 看看我在说什么？

有三个单独的点击事件，每个事件都会导致不同的操作：

$(document).ready(function () {

$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').show();
  });

 $('.text-show-2').on('click', function (e) {
     e.preventDefault();
     $('.container-show-1').hide();
     //should you also be showing other things?
 });

  $('.text-show-3').on('click', function (e) {
    e.preventDefault();
     $('.container-show-1').hide();
 });

});

Answer 2

如果你使用jQuery

隐藏元素使用$(".container-show-1").hide();

$(document).ready(function () {
$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').show();
});
$('.text-show-2').on('click', function () {
            $('.container-show-1').hide();
        });
$('.text-show-3').on('click', function () {
            $('.container-show-1').hide();
        });
});

不确定这是否是您期望看到的。

Answer 3

尝试这样的事情：

$("button").click(function(){ $("div").hide(1000); });

Answer 4

通过为类似元素提供公共类和/或data-属性，可以更容易地管理这类事情，以便您可以一次性选择它们并分配单个通用事件处理程序。然后事件处理程序只需要某种方式来知道哪个div与被点击的项目相关。一种方法是为每个锚提供一个data-属性，用于指定相关div的id或class。

所以也许这样的事情：

$(document).ready(function () {
  // Hide all of the divs initially:
  $('.associated').addClass('hide');
  
  // When any anchor with the data- attribute is clicked:
  $('a[data-associated]').on('click', function (e) {
    e.preventDefault();
    // Hide any div currently showing:
    $('.associated').addClass('hide');
    // Unhide the div associated with the clicked item by using the
    // value from the anchor's data- attribute:
    $('#associated-' + $(this).attr("data-associated")).removeClass('hide');
  });
});

.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#associated-1" data-associated="1">Show 1</a>
<a href="#associated-2" data-associated="2">Show 2</a>
<a href="#associated-3" data-associated="3">Show 3</a>

<div class="associated" id="associated-1">Content One</div>
<div class="associated" id="associated-2">Content Two</div>
<div class="associated" id="associated-3">Content Three</div>

注意：我给每个div一个唯一的id。您可以使用唯一的class，但标识唯一项是id的用途。此外，我已将锚点的href设置为关联div的id - 这是完全可选的，与隐藏/显示行为无关，但这意味着用户已禁用JavaScript单击锚点将跳转到那些div作为标准锚点行为的一部分。）

单击jQuery显示和隐藏

4 个答案: