Question

我无法弄清楚为什么切换在我的代码中不起作用。当我点击导航按钮时，这应隐藏侧边栏，但事实并非如此。非常感谢您阅读我的问题。

的JavaScript

$('#navbutton').click(function() {
$('#sidebar').toggle('slow');
});

HTML / PHP（仅在＆lt; button＆gt;＆lt; / button＆gt;标记之间查看。

                <div id="header">

                <button type="button" class="btn btn-default btn-lg"id="navbutton">
                <span class="glyphicon glyphicon-align-justify"></span>
                </button>

                <div id="title">
                <a href="home.php" style="color:#fafafa;text-decoration:none;">Trigger</div>
                <div id="MenuInHeader"><ul><li><a href="logout.php"><i class="fa fa-external-link fa-fw"></i> Logout</a></li></ul></div>
            </div>

CSS

#sidebar {
position:absolute;
left:0;
width:200px;
height:100%;
background:#5e5e5e;
opacity:0.9;
}

Answer 1

将此div添加到您的标记

<div id="sidebar"></div>

将你的js包裹在document.ready

中

试试这个

$(document).ready(function(){

  $('#navbutton').click(function(e) {
    e.preventDefault();
         $('#sidebar').toggle('slow');
   });

});

<强> DEMO HERE

Answer 2

这是一个简单的隐藏/显示侧边栏脚本供您了解：

<div id="sidebar" style="height:600px; width:100px; right:-75px; position:absolute; background-color:black;">
//sidebar styling
</div>




<script>
$('#sidebar').hover(function() {
$('#sidebar').stop().animate({'right' : '0px'}, 250);
}, function() {
$('#sidebar').stop().animate({'right' : '-75px'}, 350); 
});

以下是一个工作示例：http://jsfiddle.net/XTDHx/

切换隐藏/显示侧边栏jQuery无法正常工作

2 个答案: