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

Question

我有 4 个 div，其中两个在单击（链接）时显示，并以相同的方式隐藏。当我单击其他 2 个 div 的链接时，前 2 个应该再次隐藏，反之亦然。现在，如果单击 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");
  });
});

score 1 · Accepted Answer

在不更改标记的情况下，您可以使用它：

$(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");
                });
            });
        });
    });
});

工作样本

score 1 · Accepted Answer

嗨，我会像这个jsfiddle示例那样做

HTML

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

<a class="show_hideContact" href="#" >Contact</a>
<div class="slidingDivAbout">Some Content1</div>
<div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
<div class="slidingDivContact">Some Content2</div>
<div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>

脚本

$(function(){

         $('.slidingDivAbout').hide();
         $('.slidingDivAboutArr').hide();
         $('.slidingDivContact').hide();
         $('.slidingDivContactArr').hide();

         $('.show_hideAbout').click(function() {
            $('.slidingDivAbout').show(350);
            $('.slidingDivAboutArr').show()
            $('.slidingDivContact').hide();
            $('.slidingDivContactArr').hide();
        });

        $('.show_hideContact').click(function() {         
            $('.slidingDivContact').show(350);
            $('.slidingDivContactArr').show('fast', 'linear');
            $('.slidingDivAbout').hide();
            $('.slidingDivAboutArr').hide();
        });
});

score 0 · Accepted Answer

对于每个链接，您应该绑定一次点击。

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

以下 2 个是重复的，因为它们将点击绑定到同一个标签。class="show_hideAbout show_hideAboutArr")

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

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

只保留一个。和

$('.show_hideAbout').click(function(){
    $(".slidingDivAbout").slideToggle(350);
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
});

score 0 · Accepted Answer

我会在您的 html 标记中使用自定义属性：

这是一个工作演示

HTML：

<a class="slidingLink" slide="about" href="#" >About</a>
<a class="slidingLink" slide="contact" href="#" >Contact</a>

<div class="slidingContainer" id="about">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>
<div class="slidingContainer" id="contact">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

JavaScript：

$(document).ready(function(){
    $('.slidingContainer').hide();
    $('.slidingLink').click(function () {
        var toSlide = $(this).attr("slide");
        $("#"+toSlide).slideDown(350);
        $('.slidingContainer').each(function () {
            if ($(this).attr("id") != toSlide) {
                $(this).slideUp(350);
            }
        });
    });
});

这绝对是通用的，因此添加新链接所需要做的就是添加一个新a标签，其slide属性设置为id具有类的 div 的属性slidingContainer。

score 0 · Accepted Answer

也许尝试这样的事情？

<a class="show_hideAbout" href="#" >About</a>
<a class="show_hideContact" href="#" >Contact</a>

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

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

和javascript：

$(document).ready(function() {

    $(".divAbout").hide();
    $(".divContact").hide();

    $('.show_hideAbout').click(function() {
        if( $(".divContact").is(":visible") ) {
          $(".divContact").slideToggle(350, 'linear', function(){
            $(".divAbout").slideToggle(350, 'linear');
          });
        } else {
          $(".divAbout").slideToggle(350, 'linear');
        }
    });

    $('.show_hideContact').click(function() {
        if( $(".divAbout").is(":visible") ) {
          $(".divAbout").slideToggle(350, 'linear', function(){
            $(".divContact").slideToggle(350, 'linear');
          });
        } else {
          $(".divContact").slideToggle(350, 'linear');
        }
    });

});

score 0 · Accepted Answer

我认为最好使用 CSS 类而不是大量的隐藏/显示方法来做到这一点。HTML 看起来像：

<a class="showAbout" href="#" >About</a>
<a class="showContact" href="#" >Contact</a>
<div id='wrapper'>
    <div class="about">
        <div class="slidingDivAbout">Some Content 1</div>
        <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
    <div class="contact">
        <div class="slidingDivContact">Some Content 2</div>
        <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
</div>

有两个 CSS 规则：

#wrapper > div {
    display: none;
}
#wrapper > div.show {
    display: block;
}

然后是 jQuery：

$(function() {

    $(document).on('click', '.showAbout', function() {
        $('.about').siblings('div').removeClass('show').end().toggleClass('show');
    });

    $(document).on('click', '.showContact', function() {
        $('.contact').siblings('div').removeClass('show').end().toggleClass('show');
    });

});

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

6 回答 6

Related

Reference