Javascript 按钮 snap.js

标签 javascript jquery html css

如何使用此处找到的 snap.js 创建切换按钮 https://github.com/jakiestfu/Snap.js使用部分非常简短,我不明白。这是我想出的一些代码。我是 javascript 的新手,非常感谢任何帮助。

<script src="js/snap.min.js"></script>
<script>
 var snapper = new Snap({
  element: document.getElementById('content')
});
   myToggleButton.addEventListener('click', function(){

if( snapper.state().state=="left" ){
    snapper.close();
} else {
    snapper.open('left');
}

});
</script>
</head>

<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>

最佳答案

您需要先获取按钮元素,然后再在其上添加点击监听器。此外,按钮上 id 属性的标记是错误的。

<script src="js/snap.min.js"></script>
<script>
    var snapper = new Snap({
        element: document.getElementById('content')
    });

    // Get the button
    var myToggleButton = document.getElementById('myToggleButton');

    myToggleButton.addEventListener('click', function(){

        if( snapper.state().state=="left" ){
            snapper.close();
        } else {
            snapper.open('left');
        }

    });
</script>
</head>

<body>
<button id="myToggleButton">Menu</button>
<div id="content">
    This is a menu
</div>

编辑:更新了使用 document.getElementById 而不是 jQuery 的答案。

关于Javascript 按钮 snap.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22950826/

相关文章:

javascript - 为什么在 Javascript 事件处理函数中带有括号?

javascript - 如何将所有选中的checkboxID传递给REST

javascript - css 样式不工作和 js

javascript - Gmail REST API - 将邮件标记为已读

javascript - 单击按钮永久删除计时器

jquery - 简单的JQuery嵌套列表遍历问题

html - jsf 页面的中心组件

javascript - 想要将属性名称作为函数中的参数传递。在 Javascript 中

javascript - 仅在特定 div 上单击事件

javascript - 使用 JS 模糊将焦点转移到 div 上