Question

所以我使用了这个＆＃34; Color Admin Responsive Admin Template＆＃34; （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/

Answer 1

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

alert(typeof jQuery !== "undefined")

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

Answer 2

你可以使用css：hover来完成这个（没有动画），没有任何javascript。

编辑：我刚刚意识到你想通过按钮来控制扩展和崩溃。这个答案没有解决这个问题，但我会把它留在这里作为替代方案。

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>

HTML / JavaScript：补充工具栏展开/折叠按钮

2 个答案: