如何将此滑动面板 jQuery 插件设置为默认关闭？

Question

I've implemented the panel toggle script by DojoGeekRA which is published at JqueryScript.net (demo https://www.jqueryscript.net/demo/Creating-A-Toggable-Bottom-Content-Panel-Using-jQuery-CSS/ )我已经实现了 DojoGeekRA 的面板切换脚本，该脚本发布在 JqueryScript.net（演示https://www.jqueryscript.net/demo/Creating-A-Toggable-Bottom-Content-Panel-Using-jQuery-CSS/ ）

It functions as needed as far as the toggle open / close behavior, however it defaults to open state when the page is loaded and I need it to default to close .就切换打开/关闭行为而言，它可以根据需要运行，但是它默认在页面加载时打开 state 并且我需要它默认为 close 。

The JS JS

(function($) {

jQuery(document).ready(function() {
    Panel.init();
    $(document).on('click', '.tab-controller', function() {
    Panel.togglePanel();
    });
});

var Panel = {
    isVisible : true,
    showMessage : null,
    hideMessage : null,
    animationDuration : 650,
    animationEasing : 'linear',
    init : function() {},

    hidePanel : function() {
        $('.panel-wrapper').animate({
            bottom : -(Panel.getAnimationOffset())
        }, Panel.animationDuration, Panel.animationEasing, function() {
            Panel.isVisible = false;
            Panel.updateTabMessage();
        });
    },

    showPanel : function() {
        $('.panel-wrapper').animate({
            bottom : 0
        }, Panel.animationDuration, Panel.animationEasing, function() {
            Panel.isVisible = true;
            Panel.updateTabMessage();
        });
    },

    togglePanel : function() {
        ((this.isVisible) ? this.hidePanel : this.showPanel)();
    },

    updateTabMessage : function() {
        if (this.isVisible) {
            $('.tab-controller .close').show();
            $('.tab-controller .show').hide();
        } else {
            $('.tab-controller .close').hide();
            $('.tab-controller .show').show();
        }
    },

    getAnimationOffset : function() {
        return $('.panel-content').height();
    }
}

})(jQuery);

I tried我试过了

setting isVisible to false but nothing changes (yes I refreshed the page)将isVisible设置为false但没有任何变化（是的，我刷新了页面）
set the .panel-content css rule to display:none and though it responds to default hidden, the JS is still in open mode so the tab states Close and goes off screen when clicked.将.panel-content css 规则设置为display:none ，虽然它响应默认隐藏，但 JS 仍处于打开模式，因此选项卡状态为关闭并在单击时关闭屏幕。

The HTML HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>The Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="plugin.css?v=9">
    <script src="jquery-1.11.0.min.js"></script>
    <script src="main.js?v=8"></script>
</head>
<body style="background: #ddd;">

<div class="panel-wrapper">
    <div class="panel-controller">
        <div class="tab-controller">
            <span class="close">Close</span>
            <span class="show">Open</span>
        </div>
    </div>
    
    <div class="panel-content">
        <div class="content clearfix">

        the content here

        </div>
    </div>
</div>

</body>
</html>

The CSS CSS

.panel-wrapper * {
    box-sizing: border-box;
}
.panel-wrapper {
    position: fixed;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 99999;
    font-family: sans-serif;
}
.panel-controller {
    position: relative;
    overflow: hidden;
}
.tab-controller {
    float: right;
    margin-right: 50px;
    padding: 5px;
    background-color: #ff0000;
    border-radius: 5px 5px 0 0;
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}
.tab-controller .show {
    display: none;
}
.panel-content {
    overflow: hidden;
}
.panel-content .content {
    overflow: hidden;
    margin: 0 5px 5px 0;
}

.clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clearfix:after {
    clear: both;
}

Update更新

The answer from @The_Death_Raw did the task (thanks), however I needed to be able to set options dynamically and use multiple instances, so I added a function closure and setting variable. @The_Death_Raw 的答案完成了任务（谢谢），但是我需要能够动态设置选项并使用多个实例，所以我添加了一个 function 闭包和设置变量。 Here is the modified working script if desired.如果需要，这是修改后的工作脚本。

(function($) {

$.fn.bottomSlidePanel = function(options) 
{
    var wrap = this;
    
    return this.each(function() 
    {
        var setting = $.extend ({
            tab: ".tab-controller",
            contentarea: ".panel-content",
            defaultState: "close",
            animTime: 250
        }, options);
        
        $(function() {
            if( setting.defaultState === "close" ) {
                Panel.init(Panel.hidePanel(Panel.animationDuration = 0));
                
                setTimeout(function() {
                    Panel.hidePanel(Panel.animationDuration = setting.animTime); 
                }, 1);
            }else{
                Panel.init();
            }
            
            $(setting.tab).on("click", function() {
                Panel.togglePanel();
            });
        });

        var Panel = {
            isVisible : true,
            showMessage : null,
            hideMessage : null,
            animationDuration : setting.animTime,
            animationEasing : "linear",
            init : function() {},

            hidePanel : function() {
                $(wrap).animate({
                    bottom : -(Panel.getAnimationOffset())
                }, Panel.animationDuration, Panel.animationEasing, function() {
                    Panel.isVisible = false;
                    Panel.updateTabMessage();
                });
            },

            showPanel : function() {
                $(wrap).animate({
                    bottom : 0
                }, Panel.animationDuration, Panel.animationEasing, function() {
                    Panel.isVisible = true;
                    Panel.updateTabMessage();
                });
            },

            togglePanel : function() {
                ((this.isVisible) ? this.hidePanel : this.showPanel)();
            },

            updateTabMessage : function() {
                if (this.isVisible) {
                    $(setting.tab+' .tabclose').show();
                    $(setting.tab+' .tabshow').hide();
                } else {
                    $(setting.tab+' .tabclose').hide();
                    $(setting.tab+' .tabshow').show();
                }
            },

            getAnimationOffset : function() {
                return $(setting.contentarea).height();
            }
        }
    });
}

}(jQuery));

Use利用

Basic using core defaults基本使用核心默认值

jQuery(function($) {
  // attach to the parent wrap element
  $(".panel-wrapper").bottomSlidePanel(); 
});

Use options使用选项

jQuery(function($) {
  // attach to the parent wrap element
  $(".panel-wrapper").bottomSlidePanel({
    tab: ".tab-controller", // set tab class or ID
    contentarea: ".panel-content", // set element class or ID
    defaultState: "open", // omit to allow default close
    animTime: 500 // (int) omit to use default value
  });
});

If anyone has the ability to make it more efficient, please post it.如果有人有能力使其更有效率，请发布。

Answer 1

Hide the panel and then set AnimationDuration to 0 to hide on page load.隐藏面板，然后将 AnimationDuration 设置为 0 以在页面加载时隐藏。

Wait for 1s and then set animation to 650 to make it work等待1s然后将animation设置为650使其工作

 (function($) { jQuery(document).ready(function() { Panel.init(Panel.hidePanel(Panel.animationDuration = 0)); setTimeout(function(){ Panel.hidePanel(Panel.animationDuration = 650); }, 1); $(document).on('click', '.tab-controller', function() { Panel.togglePanel(); }); }); var Panel = { isVisible: true, showMessage: null, hideMessage: null, animationDuration: 650, animationEasing: 'linear', init: function() { }, hidePanel: function() { $('.panel-wrapper').animate({ bottom: -(Panel.getAnimationOffset()) }, Panel.animationDuration, Panel.animationEasing, function() { Panel.isVisible = false; Panel.updateTabMessage(); }); }, showPanel: function() { $('.panel-wrapper').animate({ bottom: 0 }, Panel.animationDuration, Panel.animationEasing, function() { Panel.isVisible = true; Panel.updateTabMessage(); }); }, togglePanel: function() { ((this.isVisible)? this.hidePanel: this.showPanel)(); }, updateTabMessage: function() { if (this.isVisible) { $('.tab-controller.close').show(); $('.tab-controller.show').hide(); } else { $('.tab-controller.close').hide(); $('.tab-controller.show').show(); } }, getAnimationOffset: function() { return $('.panel-content').height(); } } })(jQuery);

 .panel-wrapper * { box-sizing: border-box; }.panel-wrapper { position: fixed; right: 0; bottom: 0; overflow: hidden; z-index: 99999; font-family: sans-serif; }.panel-controller { position: relative; overflow: hidden; }.tab-controller { float: right; margin-right: 50px; padding: 5px; background-color: #ff0000; border-radius: 5px 5px 0 0; display: block; font-size: 16px; font-weight: bold; color: white; cursor: pointer; }.tab-controller.show { display: none; }.panel-content { overflow: hidden; }.panel-content.content { overflow: hidden; margin: 0 5px 5px 0; }.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }.clearfix:after { clear: both; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body style="background: #ddd;"> <div class="panel-wrapper"> <div class="panel-controller"> <div class="tab-controller"> <span class="close">Close</span> <span class="show">Open</span> </div> </div> <div class="panel-content"> <div class="content clearfix"> the content here </div> </div> </div>

如何将此滑动面板 jQuery 插件设置为默认关闭？

问题描述

I tried我试过了

Update更新

Use利用

1 个解决方案

解决方案1
2 已采纳 2021-02-19 02:19:21

如何将此滑动面板 jQuery 插件设置为默认关闭？

问题描述

I tried我试过了

Update更新

Use利用

1 个解决方案

解决方案1 2 已采纳 2021-02-19 02:19:21

解决方案1
2 已采纳 2021-02-19 02:19:21