javascript - How to close the control sidebar class on outside click (AdminLTE)? - Stack Overflow

admin管理员组

文章数量:1420659

<aside class="control-sidebar control-sidebar-dark">
 ......
</aside>

I've tried this by adding sidebar-collapse. But it's not working.

<aside class="control-sidebar control-sidebar-dark">
 ......
</aside>

I've tried this by adding sidebar-collapse. But it's not working.

• javascript
• jquery
• adminlte

Share Improve this question Follow edited Apr 4, 2018 at 18:03 Scath 3,8241010 gold badges3131 silver badges4040 bronze badges asked Apr 4, 2018 at 10:15 AnithaAnitha 911 silver badge33 bronze badges 6

• Wele to SO. You are giving too few information. Please provide a MCVE showing us what you tried so far. – Mario Cianciolo Commented Apr 4, 2018 at 11:19
• Are you using the entire AdmintLTE or only the aside class? – Karthik Venkatraman Commented Apr 4, 2018 at 11:20
• Yes @KarthikVenkatraman I'm using entire AdminLTE. But aside with class control-sidebar makes an issue. others working fine.. data toggle is working only when clicking on sidebar. Its not working when click on outside – Anitha Commented Apr 4, 2018 at 11:26
• Thank you @MarioCianciolo.. I've used the aside like <aside class="control-sidebar control-sidebar-dark"> <div class="box-body extn-fl"> </div> </aside> ...In html used a data-toggle of control sidebar. Its working correctly. When click on outside, unable to close the sidebar. – Anitha Commented Apr 4, 2018 at 11:28
• @Anitha, Outside means where? inside your page in any area other than the aside class? – Karthik Venkatraman Commented Apr 4, 2018 at 11:32

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

       <aside id="cust_sidebar" class="control-sidebar control-sidebar-dark">
        ......
      </aside>




    <script>
        $('.content-wrapper').click(function (e) {
            var get_class = $("#cust_sidebar").attr('class');       
            console.log(get_mini);
            if (get_class == "control-sidebar control-sidebar-dark control-sidebar-open") {
                $('#cust_sidebar').removeClass('control-sidebar-open');
            }               
        })
    </script>

A further simplification of @Charlie 's answer that doesn't break if you theme (skin) the control sidebar:

html

<aside id="control_sidebar" class="control-sidebar control-sidebar-dark">
    ......
</aside>

js (jquery)

    $(".content-wrapper").click(function() {
        if ($("#control_sidebar").hasClass("control-sidebar-open")) {
            $("#control_sidebar").removeClass("control-sidebar-open");
        }
    });

You can toggle the aside using jquery. Since you have used the AdminLTE, it has inbuilt operations for side bar toggle. Check the jQuery and app.min.js references. May be its not working due to invalid file references.

Below is another method using the toggle function.

var master = $('[data-name="master"]'),
  side = $('[data-name="side"]');

$('.toggle', master).on('click', function() {
  master.toggleClass('slide');
  side.toggleClass('pop');
});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font: normal 14px/1.4em Helvetica, sans-serif;
}

p {
  margin-top: .5em;
}

[role="main"] {
  width: inherit;
  height: inherit;
  background: rgba(245, 245, 245, 1)
}

[data-name="side"] {
  position: absolute;
  width: 14.28571428571429em;
  height: inherit;
  padding: 1em;
  background: rgb(50, 50, 50);
}

[data-name="side"] ul {
  -webkit-transition: all 200ms linear;
  -webkit-transform: scale(.8, .8);
}

[data-name="side"].pop ul {
  -webkit-transform: scale(1, 1);
}

[data-name="side"] li {
  color: rgb(240, 240, 240);
  padding: .5em .5em .6em .5em;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .8);
}

[data-name="side"] li:first-child {
  border-top: none;
}

[data-name="side"] li:last-child {
  border-bottom: none;
}

[data-name="master"] {
  position: relative;
  padding: 1em;
  height: inherit;
  background: inherit;
  box-shadow: -1px 0 1px -1px rgba(0, 0, 0, .3);
  -webkit-transition: all 200ms ease-in-out;
  overflow: hidden;
}

[data-name="master"].slide {
  left: 14.28571428571429em;
}

[data-name="master"].slide .toggle {
  -webkit-transform: translateX(-1.2em);
}

.toggle {
  font-size: 1.3em;
  -webkit-transition: all 100ms 200ms;
  -webkit-transform: translateX(-15px);
}

.toggle:before {
  position: relative;
  content: '\2630';
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div role="main">
  <aside data-name="side">
    <ul>
      <li>Menu Item</li>
      <li>Additional</li>
      <li>Here's Another</li>
      <li>More Here</li>
      <li>One Final</li>
    </ul>
  </aside>
  <section data-name="master">
    <div class="toggle"></div>
    <p>AdminLTE is a popular open source WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3. It utilizes all of the Bootstrap ponents in its design and re-styles many
      monly used plugins to create a consistent design that can be used as a user interface for backend applications. AdminLTE is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through
      installing the template and exploring the various ponents that are bundled with the template.</p>
  </section>
</div>

UPDATE

Use the below code

$('div').click(function(e) {
   master.toggleClass('slide');
  side.toggleClass('pop');
})

U can change the div to any element you want.

i faced same problem.. solved by :

$(".content-wrapper").click(function() {
    //console.log('test click');
    $("#control_sidebar").ControlSidebar('collapse');
    
});

<aside id="control_sidebar" class="control-sidebar control-sidebar-light" ....

</aside>

本文标签： javascriptHow to close the control sidebar class on outside click (AdminLTE)Stack Overflow