顯示另一個div時隱藏div

Question

我有4個div，其中兩個在點擊（鏈接）上顯示，並以相同的方式隱藏。 當我單擊其他2個div的鏈接時，前2個應該再次隱藏，反之亦然。 現在，如果單擊2個鏈接，將顯示所有4個div。

簡單：點擊鏈接> show 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");
                });
            });
        });
    });
});

工作樣本

Answer 2

嗨，我會像這個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();
        });
});

Answer 3

也許嘗試這樣的事情？

<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');
        }
    });

});​

Answer 4

對於每個鏈接，您應該綁定一次單擊。

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

Answer 5

我認為使用CSS類而不是加載hide / show方法更好。 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');
    });

});​

Answer 6

我會在你的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屬性設置為一個div的id ，類為slidingContainer 。