Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/jquery/1.6.4/jquery.js"></script>
    <style>
        div {
            width: 500px;
            border: 1px solid #ccc;
            background: #eee;
            line-height: 100px;
            text-align: center;
            margin-top: 50px;
        }
        #layer1,#layer2 {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin: 50px;
        }
    </style>
</head>
<body>
    <button onclick="showDivs();">show all</button>
    <hr>
    <button onclick="unbindToggle('layer1')">unbind toggle (layer1)</button>
    <button onclick="bindToggle('layer1')">bind toggle (layer1)</button>
    <hr>
    <button onclick="unbindToggle('layer2')">unbind toggle (layer2)</button>
    <button onclick="bindToggle('layer2')">bind toggle (layer2)</button>
​
    <div id="wrapper">
        <p> 点我会切换 layer 显示状态 </p>
        <div id="layer1"> layer 1 </div>
        <div id="layer2"> layer 2 </div>
    </div>
​
    <script>
    function showDivs() { $('#layer1,#layer2').show(); }
    function unbindToggle(layer) {
        $('#wrapper').unbind('click.' + layer);
        return false;
    }
    function bindToggle(layer) {
        $('#wrapper').bind('click.' + layer, function(e) {
            var $target = $(e.target);
            $('#' + layer).toggle();
        });
        return false;
    }
    </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers