jQuery的顯示/隱藏div-小調整

我有以下的javascript，顯示或隱藏鏈接被點擊時，一個div：jQuery的顯示/隱藏div-小調整

<script type="text/javascript"> 
      $(document).ready(function(){    
       $('.show_hide').showHide({    
        speed: 500, // speed you want the toggle to happen 
        changeText: 0, // if you dont want the button text to change, set this to 0 
        showText: 'View',// the button text to show when a div is closed 
        hideText: 'Close' // the button text to show when a div is open         
       });     
      }); 

      (function ($) { 
    $.fn.showHide = function (options) { 

     //default vars for the plugin 
     var defaults = { 
      speed: 1000, 
      easing: '', 
      changeText: 0, 
      showText: 'Show', 
      hideText: 'Hide', 

     }; 
     var options = $.extend(defaults, options); 

     $(this).click(function() {  
      // this var stores which button you've clicked 
      var toggleClick = $(this); 
      // this reads the rel attribute of the button to determine which div id to toggle 
      var toggleDiv = $(this).attr('rel'); 
      // here we toggle show/hide the correct div at the right speed and using which easing effect 



      $(toggleDiv).slideToggle(options.speed, options.easing, function() { 
      // this only fires once the animation is completed 
      if(options.changeText==1){ 
      $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 
      } 
       }); 

      return false; 

     }); 

    }; 
})(jQuery); 
</script>

的問題是，我有兩個這樣的div，但我只想要一個一次顯示。因此，如果有人點擊鏈接以顯示div 2，並且已經顯示div 1，則應在顯示div2之前先隱藏自己。

相關HTML：

<div class="button"><a href="#" rel="#faq" class="show_hide">FAQs</a></div> 
<div class="button"><a href="#" rel="#contact" class="show_hide">Contact</a></div> 
<div id="faq" class="faq">FAQs here </div> 
<div id="contact" class="faq">Contact form here </div>

我沒有與JS/jQuery的任何經驗，但我嘗試添加該代碼，沒有工作：

   var otherDiv; 

      if ($(this).attr('rel') == 'contact') 
       otherDiv = 'faq'; 
      else 
       otherDiv = 'contact';    

      if ($(otherDiv).is(":visible")) 
       $(otherDiv).slideToggle(options.speed);

來源

2011-10-20 xbonez

大多數人使用CSS類作爲存儲'元數據'的地方。當div變得可見時，向它添加一個類，如「toggledVisible」或其他。當點擊一個新的切換時，找到所有「toggledVisible」的實例，隱藏它們，並刪除該類。

或者，您總是跟蹤某種「currentlyVisible」對象並切換它。

來源

2011-10-20 06:29:31

也許jQuery ui手風琴是一種選擇？
HTML：

<div class="accordion"> 
    <h3><a href="#" rel="#faq">FAQs</a></h3> 
    <div id="faq" class="faq">FAQs here</div> 
    <h3><a href="#" rel="#contact">Contact</a></h3> 
    <div id="contact" class="faq">Contact form here</div> 
</div>

JS：

jQuery(document).ready(function() { 
    jQuery(".accordion").accordion(); 
});

也看到我jsfiddle。

=== UPDATE ===

JS：

jQuery(document).ready(function() { 
    jQuery(".accordion").accordion({ 
     autoHeight: false 
    }); 
});

也看到我更新jsfiddle。

來源

2011-10-20 06:33:43 scessor

有點沉重，如果其他jQuery UI組件不會被使用。然而，總體來看，這仍然是一個很好的觀點：目前已有100萬套自給式手風琴;肯定其中一人會工作！ –

我嘗試過實施手風琴，看起來效果非常好，但在我的情況下它不適用於我，因爲我的聯繫表格相對較小，而常見問題解答很大。當所有div尺寸大致相同時，手風琴效果最佳。除非我錯過了什麼 – xbonez

這就是我的意思：http://jsfiddle.net/szrhD/3/ – xbonez

嘗試在點擊（）函數

$('.faq').not(this).hide();

這將隱藏，除非你點擊了一個所有顯示的div添加此行。

來源

2011-10-20 06:59:51 Bazuka

jQuery的顯示/隱藏div-小調整

回答

相關問題