javascript - 自动面板问题中加载时的togle输入
问题描述
我正在制作应用程序布局。
我的垂直面板以扩展格式加载我想加载为折叠的垂直面板，例如-
这是我的 codepen 代码链接 - https://codepen.io/anuj53214/pen/abNRrGO
垂直菜单在加载时应该看起来像这样（我尝试使用在点击时写入的加载 jquery 事件，但这就像首先展开然后在页面 laod 上折叠）
解决方案
为了得到你的结果，在定义结束时触发 click 事件就足够了：
$(".rad-toggle-btn").on('click', function() {
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
}).trigger('click');
^^^^^^^^^^^^^^^^^^
$(".rad-toggle-btn").on('click', function() {
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
}).trigger('click');*{box-sizing:border-box}body{background:#f3f3f4;line-height:normal;font-size:16px;font-family:sans-serif}body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}body::-webkit-scrollbar{width:10px;background-color:#407396}body::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#407396}a{text-decoration:none}a:hover{text-decoration:none}.rad-navigation{position:fixed;left:0;right:0;top:0;height:50px;box-shadow:0 0 9px 4px rgba(0,0,0,.1),0 -5px 2px 2px rgba(0,0,0,.1);background:#fff;z-index:10000}.links{margin-right:30px;position:relative}.links li{list-style:none;position:relative;margin:10px;display:inline-block}.rad-dropmenu-item.active{display:block;-webkit-animation:flipInX .3s ease}.rad-logo-container{width:225px;text-align:center;height:50px;float:left;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-top-nav-container{float:right;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-logo,.rad-toggle-btn{text-decoration:none;position:relative;height:50px;line-height:50px;padding:0 15px;font-size:22px;font-weight:900;text-transform:uppercase;text-decoration:none;color:#222533;display:inline-block}.rad-toggle-btn:hover{background:#9494b8}.rad-menu-item{position:relative;padding:0 10px;line-height:30px;height:30px;color:#89949b;z-index:5}.rad-menu-badge{position:absolute;min-width:20px;min-height:20px;line-height:20px;font-weight:700;color:#fff;border-radius:100%;font-size:12px;background:#e94b3b;box-shadow:.5px .2px 1px rgba(0,0,0,.5);display:inline-block;text-align:center;top:-10px;z-index:1}.rad-dropmenu-item{position:absolute;right:0;top:40px;min-width:250px;background:#fff;border-top:5px solid #2f4050;border-radius:2px;box-shadow:0 0 5px rgba(0,0,0,.15);display:none}.rad-dropmenu-item:before{content:"";position:absolute;border-width:0 10px 10px 10px;border-style:solid;border-color:#2f4050 transparent;top:-14px;right:8px}.rad-dropmenu-footer,.rad-dropmenu-header{display:block!important;background:#f9fafb;text-transform:uppercase;font-weight:700;font-size:12px;margin:0!important;padding:6px;text-align:center}.rad-dropmenu-footer>a{color:#98a0a3;line-height:12px;text-decoration:none}.rad-dropmenu-header{border-bottom:1px solid #f2f2f2}.rad-dropmenu-header>a{color:#98a0a3;line-height:12px;text-decoration:none}.rad-dropmenu-footer{border-top:1px solid #f2f2f2}.rad-sidebar{z-index:9999;position:fixed;background:#2f4050;width:225px;height:100vh;top:50px;left:0;box-shadow:0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-sidebar li{text-align:left;height:50px}.rad-sidebar li a{text-decoration:none;height:50px;display:block;color:#fff}.rad-sidebar li a i{position:relative;width:50px;height:50px;line-height:50px;text-align:center}.rad-sidebar li a i:before{z-index:10;position:relative}.rad-sidebar li a>span{display:inline-block;padding-left:10px;-webkit-transition:all .2s ease-in-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.rad-sidebar li:hover{background:#263340}.rad-sidebar li:hover .icon-bg{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.icon-bg{position:absolute;left:0;top:0;bottom:0;z-index:1;width:100%;-webkit-transform:translate3d(-47px,0,0);transform:translate3d(-47px,0,0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-bg-primary{background:#1c7ebb}.rad-bg-success{background:#23ae89}.rad-bg-danger{background:#e94b3b}.rad-bg-warning{background:#f98e33}.rad-bg-violet{background:#6a55c2}.rad-sidebar.rad-nav-min{width:50px!important}.rad-sidebar.rad-nav-min .rad-sidebar-item{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.rad-sidebar.rad-nav-min .icon-bg{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.rad-sidebar.rad-nav-min .icon-bg:hover{opacity:.4}.rad-body-wrapper{position:absolute;left:250px;top:75px;width:auto;right:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-body-wrapper.rad-nav-min{left:50px}.rad-chart{height:250px}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@media screen and (max-width:850px){.rad-navigation{height:100px}.rad-logo-container{display:block;float:none;width:100%;border-bottom:1px solid #f2f2f2}.rad-top-nav-container{display:block;float:none;height:50px;font-size:12px;background:#fff}.rad-menu-badge{font-size:10px;min-width:15px;min-height:15px;line-height:15px}.links{float:right}.rad-sidebar{top:100px}.rad-sidebar.rad-nav-min{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.rad-body-wrapper{top:125px;position:relative}.rad-body-wrapper.rad-nav-min{left:0}}.panel{box-shadow:0 2px 5px 0 rgba(0,0,0,.26);border-radius:0!important}.panel-heading{background:#2f4050!important;border-radius:0;padding:15px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}.panel-heading .panel-title{text-transform:uppercase;font-weight:600;font-size:12px;color:#dce0f3}#areaChart path[AttributesStyle]{fill:#39c7aa;stroke:none;fill-opacity:1}.menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;justify-content:space-around;max-width:700px;margin-left:auto;margin-right:auto}.menu a{color:#fff;margin:10px;padding:20px;text-align:center;font-size:14px;text-decoration:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);border-radius:0!important;background-color:#2f4050!important;-webkit-transition:all ease-in-out 350ms;transition:all ease-in-out 350ms}.menu a:hover{color:#9ab9ce;background-color:#4b667f!important}.overlay{height:0%;width:100%;position:fixed;z-index:1;top:0;left:0;background-color:#000;background-color:rgba(0,0,0,.99);overflow-y:scroll;-webkit-transition:.5s;transition:.5s}.overlay::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}.overlay::-webkit-scrollbar{width:10px;background-color:#407396}.overlay::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#407396}.overlay-content{position:relative;top:25%;width:100%;text-align:center;margin-top:30px}.overlay a{padding:8px;text-decoration:none;font-size:36px;color:#818181;display:block;-webkit-transition:.3s;transition:.3s}.overlay a:focus,.overlay a:hover{color:#f1f1f1}.overlay .closebtn{position:absolute;top:100px;right:45px;font-size:60px}.overlay-c{max-width:300px;margin-left:auto;margin-right:auto}.field-container{-webkit-box-flex:1;flex:1 100%;margin-bottom:20px;margin-top:-1px;border-width:0 0 1px 0;border-style:solid;border-color:#407396}.field-container .input{width:100%;margin:0;padding:0 6px;border:none;outline:0;background:0 0;color:#fff}.field-container .text-area{min-height:38px;height:50px;margin:2px 0 3px;overflow-y:scroll;resize:none;-webkit-transition:height .1s;transition:height .1s}.field-container :-moz-placeholder,.field-container :-ms-placeholder,.field-container ::-webkit-input-placeholder{color:#407396}.button-container{display:-webkit-box;display:flex;margin:10px}.button-container a:hover{color:#fff}.button-container a{color:#407396;margin:5px;margin-right:40px;font-size:20px;text-decoration:none;-webkit-transition:all ease-in-out 350ms;transition:all ease-in-out 350ms}p{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;color:#fff;font-size:40px;padding-bottom:50px}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container"><a class="rad-logo" href="#">p.m.s</a><a class="rad-toggle-btn pull-right" href="#"><i class="fa fa-bars"></i></a></div>
<div class="rad-top-nav-container">
<ul class="links">
<li><a class="rad-menu-item" href="#"><i class="fa fa-comment-o"> </i></a></li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-envelope-o"><span class="rad-menu-badge">3</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header"><a href="#">Your Notifications</a></li>
<li class="rad-notification-item"><a class="rad-notification-content" href="#"></a></li>
<li class="rad-dropmenu-footer"><a href="#">See all notifications</a></li>
</ul>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-bell-o"><span class="rad-menu-badge">49</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header"><a href="#">Your Alerts</a></li>
<li class="rad-notification-item"><a class="rad-notification-content" href="#"></a></li>
<li class="rad-dropmenu-footer"><a href="#">See all alerts</a></li>
</ul>
</li>
<li><a class="rad-menu-item" href="#"><i class="fa fa-sign-out"> </i></a></li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar">
<ul>
<li><a class="inbox" href="#"><i class="fa fa-dashboard"><span class="icon-bg rad-bg-success"></span></i><span class="rad-sidebar-item">Dashboard</span></a></li>
<li><a href="#"><i class="fa fa-wrench"><span class="icon-bg rad-bg-violet"></span></i><span class="rad-sidebar-item">Settings</span></a></li>
</ul>
</nav>
</aside>
<main>
<section>
<div class="rad-body-wrapper">
<div class="container-fluid">
<div class="menu"><a href="#" onclick="openaddteam()">ADD TEAM MEMBER</a><a href="#" onclick="opencreate()">CREATE PROJECT</a><a href="#" onclick="openset()">SET TASK</a></div>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">team members</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">projects</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">event notification</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">project task progress</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="areaChart"></div>
</div>
</div>
</div>
<!-- here-->
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">number of project</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="donutChart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">project stage</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="barChart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>推荐阅读
- angular7 - Boostrap - angular7 的响应式方法需要清晰
- python - 如何将 vsc 中的 jupyter 交互式输出导出为 pdf
- arm - 在 ARM 汇编中使用 ADDS 指令而不是 ADD 指令的原因是什么？
- angularjs - Angularjs ng-repeat 过滤器与多选下拉列表中的多选值
- ubuntu - Gatsby 在 Nginx 上构建而不是在构建时加载 js
- c# - 将 DataSet 的 XML 表示嵌入到更大的自定义格式文件中。这是好习惯吗？
- angular - 如何在导航时将数据从 Sidemenu 传递到其他页面
- json - 读取和编辑json文件
- mysql - 显示来自 MySQL 数据库的单个条目
- c# - Azure 的 Sql 删除查询优化