【发布时间】：2021-02-20 20:41:33
【问题描述】：
我已经实现了 DojoGeekRA 的面板切换脚本，该脚本发布在 JqueryScript.net（演示 https://www.jqueryscript.net/demo/Creating-A-Toggable-Bottom-Content-Panel-Using-jQuery-CSS/）
就切换打开/关闭行为而言，它会根据需要发挥作用，但是当页面加载时它默认为打开状态，我需要它默认关闭。
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);
我试过了
- 将
isVisible设置为false但没有任何变化（是的，我刷新了页面） - 将
.panel-contentcss 规则设置为display:none，虽然它响应默认隐藏，但 JS 仍处于打开模式，因此选项卡状态为 关闭 并在单击时关闭屏幕。李>
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>
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;
}
更新
@The_Death_Raw 的回答完成了任务（谢谢），但是我需要能够动态设置选项并使用多个实例，所以我添加了一个函数闭包和设置变量。如果需要，这是修改后的工作脚本。
(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));
使用
基本使用核心默认值
jQuery(function($) {
// attach to the parent wrap element
$(".panel-wrapper").bottomSlidePanel();
});
使用选项
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
});
});
如果有人有能力使其更高效，请发布。
【问题讨论】：
标签： javascript jquery