Блог

Главная - Вопросы по программированию - проблема с вводом toogle при загрузке в различной панели

проблема с вводом toogle при загрузке в различной панели

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

я создаю макет приложения.
моя вертикальная панель загружается в развернутом формате, который я хочу загрузить как свернутую вертикальную панель, например-

вот моя ссылка на codepen для кода —https://codepen.io/anuj53214/pen/abNRrGO

вертикальное меню должно выглядеть так при загрузке (я пробовал использовать событие jquery при загрузке, которое записывается по щелчку, но это сработало как сначала развернуть, а затем свернуть на странице laod) введите описание изображения здесь

Комментарии:

1. Хорошо, и что вы пробовали? В вопросе нет кода, и в настоящее время он читается так, как будто вы даете нам задание.

2. @Mitya попробовал $(".rad-sidebar").toggleClass("rad-nav-min"); $(".rad-body-wrapper").toggleClass("rad-nav-min"); загрузить это событие, которое в настоящее время работает при нажатии

Ответ №1:

Чтобы получить результат, достаточно запустить событие 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>

Комментарии:

1. я попробовал это решение проблема в том, что этот код загружает страницу на развернутой вертикальной странице, затем сворачивается, выглядит странно