如何在外部单击（AdminLTE）时关闭控制侧边栏类？答案

【问题标题】：How to close the control sidebar class on outside click (AdminLTE)?如何在外部单击（AdminLTE）时关闭控制侧边栏类？
【发布时间】：2018-04-04 10:15:26
【问题描述】：

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

我已经通过添加侧边栏折叠来尝试这个。但它不起作用。

【问题讨论】：

欢迎来到 SO。你提供的信息太少了。请提供MCVE 向我们展示您到目前为止所做的尝试。
你是使用整个 AdmintLTE 还是只使用 side 类？
是的@KarthikVenkatraman 我正在使用整个 AdminLTE。但是除了类控制侧边栏之外，还有一个问题。其他工作正常..数据切换仅在单击侧边栏时有效。点击外部时它不起作用
谢谢@MarioCianciolo.. 我用过像
...在 html 中使用了控制侧边栏的数据切换。它工作正常。点击外部时，无法关闭侧边栏。
@Anitha，外面的意思是哪里？在你的页面内除了旁白类之外的任何区域？

标签： javascript jquery adminlte

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

我喜欢 React 项目的这个选项。谢谢！

【解决方案3】：

您可以使用 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: '\2630';
}

<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 更改为你想要的任何元素。

【讨论】：

谢谢@Karthik.. 让我试试这个。
它不起作用 :(.. 这里侧边栏仅在单击菜单图标时关闭。单击其他区域时无法关闭。
已更新更新中的javascript。这将隐藏切换按钮。 jsfiddle 链接是jsfiddle.net/karthik82vk/hoecys41/3
让我知道它是否有效。也请投票并标记它已解决您的请求的答案，以便对遇到相同问题的其他人有所帮助。
谢谢@Karthik。我需要在旁边使用数据名称吗？是否可以在旁边的类中使用控制侧边栏？就我而言，我在旁边使用了 control-sidebar 和 control-sidebar-dark，这里的 data-toggle 运行良好。但这在单击任何其他区域时不会关闭。我应该像上面一样尝试使用 data-name 吗？？

【解决方案4】：

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

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

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

</aside>

【讨论】：