如何在外部点击时关闭控制侧边栏 class (AdminLTE)？

Question

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

我已经通过添加侧边栏折叠来尝试这个。但是没用。

Answer 1

您可以使用 jquery 切换到一边。由于您使用过 AdminLTE，因此它具有用于侧栏切换的内置操作。检查 jQuery 和 app.min.js 参考。可能是由于文件引用无效而无法正常工作。

下面是另一种使用切换功能的方法。

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: '30';
}

<script src="https://ajax.googleapis.com/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 components in its design and re-styles many
      commonly 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 components that are bundled with the template.</p>
  </section>
</div>

更新

使用下面的代码

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

您可以将 div 更改为您想要的任何元素。

Answer 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>

Answer 3

@Charlie 的答案的进一步简化，如果您为控件侧边栏设置主题（皮肤）也不会中断：

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");
        }
    });

Answer 4

我遇到了同样的问题.. 解决方法：

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

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

</aside>

如何在外部点击时关闭控制侧边栏 class (AdminLTE)？

How to close the control sidebar class on outside click (AdminLTE)?

javascript

jquery

adminlte