Question

我在我的网络应用程序中使用jquery ui作为手风琴菜单框。我能够很好地为手风琴添加物品。它是.draggable。但是，如果可能的话，我希望它也是可恢复的，但我无法弄清楚如何让它工作。这是我的相关html部分：

<div id="layer_accordion">
        <h3><a href="#Accordion1"></a></h3>
        <div>
        </div>
</div>

这是jquery部分：

$("#layer_accordion").draggable({ cursorAt: { top: -10, left: -10 } });
// now initiate accordion
$("#layer_accordion").accordion({ clearStyle: true, autoHeight: false });
$('#layer_accordion').accordion('activate', 1);

非常感谢任何帮助。

干杯，德里克

Answer 1

您是否在控制台中收到任何JS错误？是否有任何样式可能妨碍其正常运行？

我能够让它发挥作用。使用JQuery 1.7.2＆amp; JQuery UI 1.8.23您必须查看JQuery UI文档中的CSS，以了解它们如何将调整大小句柄保持在右下角。

http://jqueryui.com/demos/resizable/

这很丑，但这里是我的所有代码：

 <!doctype html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <style type="text/css">
        #layer_accordion { border: 1px solid #000; width: 200px; display:inline-block;}
        .ui-resizable-handle { width: 16px; border: 1px solid #0f0; height: 16px;}
    </style>

</head>
<body>

<div id="layer_accordion">
        <h3><a href="#Accordion1">asdf</a></h3>
        <div>
            content 1
        </div>
        <h3><a href="#Accordion2">asdf</a></h3>
        <div>
            content 2
        </div>
</div>
</body>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#layer_accordion").draggable({ cursorAt: { top: -10, left: -10 } });
        $("#layer_accordion").accordion({ clearStyle: true, autoHeight: false });
        $('#layer_accordion').accordion('activate', 1);
        $('#layer_accordion').resizable();
    });

    </script>
</html>

jquery ui手风琴可拖动且可调整大小

1 个答案: