jquery - 侧边栏菜单中的固定部分？

我有一个要添加到侧边栏菜单的功能。

我的菜单包含以下内容：

---------------------
Folder 1
\------> action 1
\------> action 2
\------> action X
---------------------
---------------------
Folder 2
\------> action 1
\------> action X
---------------------
---------------------
Folder 3
\------> action 1
---------------------
---------------------
Folder 4
---------------------

我网站的用户使用不同的文件夹，但是我希望每个文件夹中都有一个按钮，以允许用户“固定”用户在一天中会更频繁使用的文件夹。像按钮一样的东西，一旦按下它就会将该文件夹部分移到顶部。

每个文件夹的HTML都是这样的：

<li>
   <div class="droppable folder expanded">
       <div class="folder_content">
           <div class="folder_name">
               Folder 1
           </div>
           <div class="folder_extra">
               <ul class="modules">
                   <li>action 1</li>
                   ......
                   <li>action X</li>
               </ul>
           </div>
       </div>
   </div>
</li>

最佳答案

这是一个简单的解决方案。它使用前缀将文件夹设置为固定部分。接下来将是使用本地存储来保存固定项目的顺序。

JSFiddle

$('.pin').click(function () {
    var file = $(this).closest('.folder_content');
    file.prependTo('.pinned');
});

.pinned, .unpinned {
    border:black solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pinned'></div>
<div class='unpinned'>
    <div class="folder_content">
        <div class="folder_name">Folder 1</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
    <div class="folder_content">
        <div class="folder_name">Folder 2</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
    <div class="folder_content">
        <div class="folder_name">Folder 3</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
    <div class="folder_content">
        <div class="folder_name">Folder 4</div>
        <button class='pin'>Pin</button>
        <div class="folder_extra">
            <ul class="modules">
                <li>action 1</li>......
                <li>action X</li>
            </ul>
        </div>
    </div>
</div>

关于jquery - 侧边栏菜单中的固定部分？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28833896/