Question

如何隐藏该侧栏

当我点击侧边栏以外的任何其他位置时，我想要隐藏右侧面板。

请检查以下代码，了解我是如何在特定时间点开关的。

<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>

查看图片here

<!-- Control Sidebar -->
<aside id="sidebar" class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
        <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- Home tab content -->
        <div class="tab-pane active" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading">Recent Activity</h3>
            <ul class="control-sidebar-menu">
                <li>
                    <a href="javascript::;">
                    <i class="menu-icon fa fa-truck bg-orange"></i>
                    <div class="menu-info">
                        <h4 class="control-sidebar-subheading">5</h4>
                        <p>Upcoming Orders</p>
                    </div>
                    </a>
                </li>
            </ul>
            <!-- /.control-sidebar-menu -->

            <h3 class="control-sidebar-heading">Tasks Progress</h3>
            <ul class="control-sidebar-menu">
                <li>
                <a href="javascript::;">
                    <h4 class="control-sidebar-subheading">
                    Processing
                    <span class="pull-right-container">
                        <span class="label label-danger pull-right">70%</span>
                    </span>
                    </h4>
                    <div class="progress progress-xxs">
                        <div class="progress-bar" style="width: 70%"></div>
                    </div>
                </a>
                </li>
            </ul>
            <!-- /.control-sidebar-menu -->
        </div>
        <!-- /.tab-pane -->
        <!-- Stats tab content -->
        <div class="tab-pane" id="control-sidebar-stats-tab">Status</div>
        <!-- /.tab-pane -->
        <!-- Settings tab content -->
        <div class="tab-pane" id="control-sidebar-settings-tab">
            <form method="post">
            <h3 class="control-sidebar-heading">General Settings</h3>
            <div class="form-group">
                <label class="control-sidebar-subheading">
                    Report panel usage
                    <input type="checkbox" class="pull-right" checked>
                </label>
                <p>
                Some information about this general settings option
                </p>
            </div>
            <!-- /.form-group -->
            </form>
        </div>
        <!-- /.tab-pane -->
    </div>
</aside>
<!-- /.control-sidebar -->

Answer 1

   Use this <a> anchor tag with function.
  <li>
    <a href="javascript:toggleSideBar()">togg;e<i class="fa fa-gears"></i>
    </a>
    </li>

Add toggleSideBar() function`enter code here` in script tags.
check that Id would be same for aside tag which is given function
    <script>

    function toggleSideBar() {
        var x = document.getElementById('sidebar');
        if (x.style.display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
    }
}
</script>

当我在特定的div侧面板外面点击时，如何隐藏控制侧栏

1 个答案: