Question

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

我通过添加侧栏崩溃尝试了这一点。但它不起作用。

Answer 1

@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 2

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

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

＆＃13;

var master = $('[data-name="master"]'),
  side = $('[data-name="side"]');

$('.toggle', master).on('click', function() {
  master.toggleClass('slide');
  side.toggleClass('pop');
});

＆＃13;

* {
  -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';
}

＆＃13;

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

＆＃13;

<强>更新

使用以下代码

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

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

Answer 3

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

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

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

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

</aside>

如何在外部点击（AdminLTE）上关闭控制边栏类？

4 个答案: