1

I'm trying to create a sortable list with jQuery UI, My code appears to work, but I want to add a drop down to each list to set an active for the clicked list.

How do I change this so, when selected, the selected sublist should be shown and the others should be hidden?

Relevant JSFiddle.

Relevant 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>
4

1 回答 1

1

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

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

查看更新的小提琴

于 2013-07-01T14:31:11.180 回答