首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Javascript按钮snap.js

Javascript按钮snap.js
EN

Stack Overflow用户
提问于 2014-04-09 00:43:41
回答 3查看 813关注 0票数 0

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

代码语言: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>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-04-09 00:48:54

在添加单击监听器之前,需要获取按钮元素。此外,id属性的标记在按钮上是错误的。

代码语言:javascript
复制
<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。

票数 2
EN

Stack Overflow用户

发布于 2014-04-09 00:50:51

看起来您的JavaScript中有一个错误(除非您省略了一些代码)。

代码语言:javascript
复制
var snapper = new Snap({
  element: document.getElementById('content')
});

// you need to grab a reference to this node before you can add the event listener
var myToggleButton = document.getElementById('myToggleButton'); 

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

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

});
票数 2
EN

Stack Overflow用户

发布于 2015-04-07 10:39:52

代码语言:javascript
复制
addEvent(document.getElementById('toggleButton'), 'click', function(){
	if( snapper.state().state=="left" ){
        snapper.close();
    } else {
        snapper.open('left');
    }
});

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22950826

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档