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”的所有实例，隐藏它们并删除该类。

或者，您始终跟踪某种“currentVisible”对象并切换它。

Answer 2

也许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。

Answer 3

尝试在click（）函数中添加此行

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

这将隐藏除您单击的div之外的所有显示的div。

Jquery显示/隐藏div-minor调整

3 个答案: