javascript - Jquery 显示/隐藏 div - 小调整

Question

我有以下 JavaScript，可以在单击链接时显示或隐藏 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);

Answer 1

大多数人使用 CSS 类作为存储“元数据”的地方。当 div 变得可见时，向其添加一个类，例如“toggledVisible”或其他类。单击新的切换时，找到“toggledVisible”的所有实例，隐藏它们，然后删除该类。

或者，您始终跟踪某种“当前可见”对象并切换它。