Question

我的JQuery有问题：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function() {
            $(".box").draggable({cancel: ".box-content"});
            $(".close").click(function(){
                $(this).parent().parent().hide();
            });
            $("li[rel='nav']").click(function(){
                purl = $(this).attr('href');
                $.ajax({url:purl, success: function(data){
                    $("main").append(data);
                }});
            });
            $( "div" ).disableSelection();
        });
    </script>

当我点击关闭＆lt;“a”＆gt;时，它应该打开div框，移动它们并关闭它们。（没有“”）。应该可以打开彼此相邻的盒子（如“房间，库存，商店”，而不是“房间，房间，房间”）。

那就是导航：

<ul class="navigation-bar">
            <li href="include/rooms.php" class="rooms" rel="nav"></li>
            <li href="include/inventory.php" class="inventory" rel="nav"></li>
            <li href="include/shop.php" class="shop" rel="nav"></li>
            <li href="include/friends.php" class="friends" rel="nav"></li>
            <li href="include/customize.php" class="customize" rel="nav"></li>
            <li href="include/purse.php" class="purse" rel="nav"></li>
            <li href="include/news.php" class="news" rel="nav"></li>
            <li href="include/help.php" class="help" rel="nav"></li>
            <li href="logout.php" class="logout"></li>
        </ul>

这些框在＆lt;“main”＆gt;中打开。（没有“”）像这样：

        <div id="rooms" class="box box-mid">
            <div class="box-headline blue">
                Navigation
                <a href="#" id="close" class="close"></a>
            </div>  
            <div class="box-content">
                Choose a room to enter or make your own room!       
            </div>  
        </div>

Answer 1

试试这个

$(function() {
    $(".box").draggable({cancel: ".box-content"});
    $(".close").click(function(){
        $(this).parent().parent().hide();
    });
    $("li[rel='nav']").click(function(){
        purl = $(this).attr('href');
        $.ajax({url:purl, success: function(data){
            $("main").append(data);
            $(".box").draggable("destroy");
            $(".box").draggable({cancel: ".box-content"});
            $(".close").unbind('click').click(function(){
                $(this).parent().parent().hide();
            });
        }});
    });
    $( "div" ).disableSelection();
});

JQuery多个div可移动，可关闭

1 个答案: