HTML/JavaScript:边栏展开/折叠按钮

HTML/JavaScript: Sidebar expand/collapse button

本文关键字：折叠 按钮 JavaScript HTML      更新时间：2023-09-26

所以我使用这个"颜色管理响应式管理模板"(http://wrapbootstrap.com/preview/WB0N89JMK)我有一个侧边栏菜单，我有扩展/折叠按钮显示，但实际功能不起作用。我不确定它为什么不起作用，我从模板中得到了函数。我对JavaScript还很陌生，但我认为我需要在特定HTML上更改的所有内容都与该函数相匹配。

HTML

<!--sidebar left start-->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
    <!-- begin sidebar scrollbar -->
    <div data-scrollbar="true" data-height="100%">
        <!-- begin sidebar user -->
        <ul class="nav">
            <li class="nav-profile">                
                <div class="info">
                        Matt Smith
                    <small>Manager</small>
                </div>
            </li>
        </ul>
        <!-- end sidebar user -->
        <ul class="nav">
            <!-- begin sidebar minify button -->
            <li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
            <!-- end sidebar minify button -->
        </ul>
    </div>
    <!-- end sidebar scrollbar -->
</div>
<!--sidebar left end-->

JavaScript

var handleSidebarMinify = function() {
    $('[data-click=sidebar-minify]').click(function(e) {
        e.preventDefault();
        var sidebarClass = 'page-sidebar-minified';
        var targetContainer = '#page-container';
        if ($(targetContainer).hasClass(sidebarClass)) {
            $(targetContainer).removeClass(sidebarClass);
            if ($(targetContainer).hasClass('page-sidebar-fixed')) {
                generateSlimScroll($('#sidebar [data-scrollbar="true"]'));
            }
        } else {
            $(targetContainer).addClass(sidebarClass);
            if ($(targetContainer).hasClass('page-sidebar-fixed')) {
                $('#sidebar [data-scrollbar="true"]').slimScroll({destroy: true});
                $('#sidebar [data-scrollbar="true"]').removeAttr('style');
            }
            // firefox bugfix
            $('#sidebar [data-scrollbar=true]').trigger('mouseover');
        }
        $(window).trigger('resize');
    });
};

http://jsfiddle.net/BootstrapOrBust/71og00ev/1/

您的html中没有包含jQuery库。我在你的代码顶部添加了对JQuery的检查：

alert(typeof jQuery !== "undefined")

它返回CCD_ 1，这意味着您不添加JQuery。您可以在浏览器控制台上看到Uncaught ReferenceError: $ is not defined错误。更新的JSFiddle

您可以在不使用任何javascript的情况下使用css的：hover来完成此操作（无需动画）。

编辑：我刚刚意识到你想用按钮控制膨胀和收缩。这个答案并没有解决这个问题，但我还是把它留在这里作为一个替代方案。

JSFiddle：http://jsfiddle.net/2byg62z4/

<style>
    body { margin: 0; }
    #sidepanel
    {
        position: absolute;
        min-width: 30px;
        height: 60%;
        top: 20%;
        left: 0;
    }
    #bar
    {
        display: table;
        background-color: #999999;
        color: white;
        width: 30px;
        height: 100%;
        text-align: center;
    }
    #bar div
    {
        display: table-cell;
        vertical-align: middle;
    }
    #panel
    {
        display: none;
        background-color: #999999;
        color: white;
        width: 300px;
        height: 100%;
        text-align: center;
    }
    #panel div
    {
        display: table-cell;
        vertical-align: middle;
    }
    #sidepanel:hover #bar { display: none; }
    #sidepanel:hover #panel { display: table; }
</style>
<div id='sidepanel'>
    <div id='bar'>
        <div>
            &gt;<br>&gt;<br>&gt;
        </div>
    </div>
    <div id='panel'>
        <div>
            stuff
        </div>
    </div>
</div>
相关文章：