jQuery 多个隐藏面板问题

Question

我一直在努力设置一些隐藏的滑动面板。我找到了一个到目前为止似乎工作得很好的“滑块”。我能够正确打开面板，并在单击面板窗口时关闭它们。现在我正在尝试解决最后一个问题。

当面板打开时，它们会堆叠在一起，一个在另一个之上。我想做的是在打开另一个面板时关闭这些面板。我试图调整脚本，但我对 jQuery 和脚本非常陌生。这是我目前得到的：

<script type="text/javascript" src="../js/slidepanel/jquery.slidePanel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    // default settings
    // $('.panel').slidePanel();

    // custom settings
    $('#panel1').slidePanel({
        triggerName: '#trigger1',
        position: 'fixed',
        triggerTopPos: '300px',
        panelTopPos: '25px',
    });

    $('#panel2').slidePanel({
        triggerName: '#trigger2',
        position: 'fixed',
        triggerTopPos: '340px',
        panelTopPos: '210px'
    });

    $('#panel3').slidePanel({
        triggerName: '#trigger3',
        position: 'fixed',
        triggerTopPos: '380px',
        panelTopPos: '210px',
    });
});
</script>

据我所知，我需要在其中添加某种类型的切换功能，但经过几次尝试，我没有快速获得任何进展。任何信息将不胜感激。如果我需要提供更多信息才能正确回答这个问题，请告诉我。感谢观看并感谢您的帮助！

Answer 1

假设：

1. 看起来您正在使用http://plugins.jquery.com/project/slidePanel 的滑动面板插件
2. 您希望关闭不属于当前触发器的所有其他面板，同时保持切换当前触发器面板的能力。

解决方案
您可以在插件中添加一个小改动，在执行 slidePanel() 以显示预期的面板之前隐藏所有面板。

if (!panel.is(':visible')) {
   $('.panel').hide(opts.speed);$('.trigger').removeClass('active');
}

整个插件已包含在下面，以显示您应该在哪里进行更改（查找“STACKOVERFLOW EDIT”的评论）。使用插件演示页面中的标记查看 jsfiddle 上的 working example。

/* jQuery slidePanel plugin
 * Examples and documentation at: http://www.jqeasy.com/
 * Version: 1.0 (22/03/2010)
 * No license. Use it however you want. Just keep this notice included.
 * Requires: jQuery v1.3+
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 */
(function($){
    $.fn.slidePanel = function(opts) {
        opts = $.extend({
            triggerName: '#trigger',
            position: 'absolute',
            triggerTopPos: '80px',
            panelTopPos: '50px',
            panelOpacity: 0.9,
            speed: 'fast',
            ajax: false,
            ajaxSource: null,
            clickOutsideToClose: true
        }, opts || {});

        var panel = this;
        var trigger = $(opts.triggerName);
        var isIE6 = $.browser.msie && $.browser.version=="6.0"

        // ie6 doesn't like fixed position
        if(isIE6) { opts.position = 'absolute' }
        // set css properties for trigger and panel
        trigger.css('position',opts.position)
        trigger.css('top',opts.triggerTopPos);
        panel.css('position',opts.position)
        panel.css('top',opts.panelTopPos);
        panel.css('filter', 'alpha(opacity='+(opts.panelOpacity*100)+')');
        panel.css('opacity', opts.panelOpacity);

        // triggerName mousedown event
        trigger.attr( "href", "javascript:void(0)" ).mousedown(function() {
            // load default content if ajax is false

            // STACKOVERFLOW EDIT: http://stackoverflow.com/questions/2551217/jquery-select-all-elements-of-a-given-class-except-for-a-particular-id
            // hide all panels and reset all trigger classes.  first check if visible to allow toggle to function
            if (!panel.is(':visible')) {
                $('.panel').hide(opts.speed);$('.trigger').removeClass('active');
            }

            if (!opts.ajax) {
                panel.toggle(opts.speed);
                trigger.toggleClass("active");
            };
            // load ajax data if ajax is true or throw error if no ajaxSource defined
            if (opts.ajax && opts.ajaxSource!=null) {
                // fetch data ONLY when panel is hidden...
                // otherwise it fetches data when the panel is closing
                if (!panel.is(':visible')) {
                    panel.load(opts.ajaxSource, function(response, status, xhr) {
                        // if the ajax source wasn't loaded properly
                        if (status !== "success") {
                            var msg = "<p>Sorry, but there was an error loading the document.</p>";
                            panel.html(msg);
                        };
                        // this is part of the .load() callback so it fills the panel BEFORE opening it
                        panel.toggle(opts.speed);
                    });
                } else {
                    panel.toggle(opts.speed);
                };
                trigger.toggleClass("active");
            } else if (opts.ajax && opts.ajaxSource==null) {
                    alert('You must define an ajaxSource to use Ajax.');
                };
            return false;
        });

        if (opts.clickOutsideToClose) {
            // bind the 'mousedown' event to the document so we can close panel without having to click triggerName
            $(document).bind('mousedown',function(){panel.hide(opts.speed);trigger.removeClass('active');});

            // don't close panel when clicking inside it
            panel.bind('mousedown',function(e){e.stopPropagation();});
        };
    };
})(jQuery);