0

我有 2 个按钮，当您单击按钮时，<div>会弹出一个，所以它就像弹出框。

我设法让第一个按钮弹出一个<div>名为 bigbox 的按钮，但是当我尝试单击第二个按钮时，它不会弹出另一个<div>名为 editbox 的按钮。

但是当我删除控制第一个按钮的 jquery 函数时它起作用了。

<html>
<head>
    <title>Page</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

    <style type="text/css">


        .bigbox  {
            background-color: #F5E49C;
            color: #000;
            padding: 0 5px;
            width:280px;
            text-align: center;content: "";display: none;
            padding-bottom: 30px;
            padding-top: 10px;
        }

        .editbox  {
            background-color: #F5E49C;
            color: #000;
            padding: 0 5px;
            width:280px;
            height:500px;
            text-align: center;content: "";
            display: block;
            padding-bottom: 70px;
            padding-top: 10px;
            position: absolute;left:300px;top:1px;
        }


    </style>
</head>
<body>
    <button id="ClickMe">Click Me</button>
    <div id="moveableBox" data-display="hidden" class="bigbox">
    </div>
    <br>
    <button id="Click">Second pop box</button>
    <div id="ableBox" data-display="hidden" class="editbox">
    </div>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $("#ClickMe").click(function (e) {
                e.preventDefault();
                /*if (.attr("data-display") == "visible") {};*/
                $("#moveableBox").fadeToggle();
            });
            $("#moveableBox").draggable({
                handle: "#moveBox"
            });
        });
    </script>
</body>
</html>
4

1 回答 1

1

首先在浏览器控制台中出现一个错误

Uncaught TypeError: Object [object Object] has no method 'draggable'

因此，您还必须导入 jquery-ui 才能让您的 JS 执行到最后，或者干脆删除可拖动的方法。

其次，您在 #ableBox 上调用了一个切换函数，以便它消失，因为它最初是可见的。

于 2013-07-05T11:51:36.963 回答