jQuery：如何使用slideToggle函数隐藏DIV

Question

我需要修改以下脚本。点击.toggle1并显示.area1后，我需要隐藏.area1，并在点击.area2时仅显示.toggle2。 有任何想法吗？谢谢！

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle1">btn 1</div>
<div class="toggle2">btn 2</div>

<div class="area1" style="display:none;">Hidden 1</div>

<div class="area2" style="display:none;">Hidden 2</div>

Answer 1

在这里，您只需要{。{}}点击功能中的相应textarea

参见下面的演示

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
    $(".area2").hide();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    $(".area1").hide();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle1">btn 1</div>
<div class="toggle2">btn 2</div>

<div class="area1" style="display:none;">Hidden 1</div>

<div class="area2" style="display:none;">Hidden 2</div>

Answer 2

回答您的问题，假设您的意思是单击toggle1将只有area1，反之亦然

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
        $(".area2").hide();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    $(".area1").hide();
    return false;
  });
});`