顯示另一個div時隱藏div

Question

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

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

Answer 2

也許嘗試這樣的事情？

<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 3

爲每個鏈接，你應該綁定點擊一次。

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

以下兩個是重複的，因爲它們將點擊綁定到同一個標記。 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 4

我認爲最好用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'); 
    }); 

});​ 

Answer 5

我會在你的HTML標記使用自定義屬性：

Here's a working demo

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與類slidingContainer的一個div。

Answer 6

您好我會做這樣的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(); 
     }); 
});