Question

我正在尝试使用jQuery UI创建一个可排序列表，我的代码似乎可以工作，但我想在每个列表中添加一个下拉列表，为所点击的列表设置一个活动状态。

如何更改此选项，选中后，应显示所选子列表，是否应隐藏其他子列表？

相关HTML：

<!doctype html>
 <html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Sortable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>

<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
   <a href="#">Item 1</a>
            <ul class="subnav">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
            </ul>

</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>

</ul>

Answer 1

开始拖动.ui-sortable-helper元素时会添加li类。因此，使用这个简单的css，只有在拖动元素时才能显示子类：

#sortable .subnav {display: none;}
#sortable>li.ui-sortable-helper .subnav {display: block;}

请参阅updated Fiddle

如何隐藏所选列表以外的所有列表？

1 个答案: