Question

如何使用此处找到的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>

Answer 1

在添加点击侦听器之前，您需要获取button元素。此外，按钮上的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的答案。

Answer 2

看起来您的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');
  }

});

Answer 3

addEvent(document.getElementById('toggleButton'), 'click', function(){
	if( snapper.state().state=="left" ){
        snapper.close();
    } else {
        snapper.open('left');
    }
});

Javascript按钮snap.js

3 个答案: