javascript - 显示另一个 div 时隐藏一个 div

Question

我有 4 个 div，其中两个在单击(链接)时显示，并以相同的方式隐藏。当我单击其他 2 个 div 的链接时，前 2 个 div 应该再次隐藏，反之亦然。现在，如果单击 2 个链接，将显示所有 4 个 div。

简单:点击链接>显示div；单击第二个链接>显示第二个 div 同时隐藏第一个 div

2 个链接:

 <a class="show_hideAbout show_hideAboutArr" href="#" >About</a>

 <a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

前 2 个 div:

<div class="slidingDivAbout">Some Content</div>
<div class="slidingDivAboutArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

其他 2 个 div:

<div class="slidingDivContact">Some Content</div>
<div class="slidingDivContactArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

我的脚本:

$(document).ready(function() {
  $(".slidingDivAbout").hide();
  $(".show_hideAbout").show();

  $('.show_hideAbout').click(function() {
    $(".slidingDivAbout").slideToggle(350);
  });

  $(".slidingDivAboutArr").hide();
  $(".show_hideAboutArr").show();

  $('.show_hideAboutArr').click(function() {
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
  });
  $(".slidingDivContact").hide();
  $(".show_hideContact").show();

  $('.show_hideContact').click(function() {
    $(".slidingDivContact").slideToggle(350);
  });

  $(".slidingDivContactArr").hide();
  $(".show_hideContactArr").show();

  $('.show_hideContactArr').click(function() {
    $(".slidingDivContactArr").fadeToggle("fast", "linear");
  });
});​

Answer 1

无需更改标记，您可以使用此:

$(document).ready(function() {
    $(".slidingDivAbout, .slidingDivAboutArr, .slidingDivContact, .slidingDivContactArr").hide(0);

    $('.show_hideAbout').click(function() {
        $(".slidingDivContact").slideUp(300, function() {
            $(".slidingDivContactArr").fadeOut(300, function() {
                $(".slidingDivAbout").slideToggle(350, "linear", function() {
                    $(".slidingDivAboutArr").fadeToggle(350);
                });
            });
        });
    });
    $('.show_hideContact').click(function() {
        $(".slidingDivAbout").slideUp(300, function() {
            $(".slidingDivAboutArr").fadeOut(300, function() {
                $(".slidingDivContact").slideToggle(350, function() {
                    $(".slidingDivContactArr").fadeToggle(350, "linear");
                });
            });
        });
    });
});

<强> Working Sample