Question

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

我的菜单包含以下内容：

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

我网站的用户使用不同的文件夹，但我希望每个文件夹中都有一个按钮，允许用户使用＃34; pin＆＃34;用户将在当天更频繁使用的文件夹。像按下它的按钮之类的东西会将该文件夹部分移动到顶部。

每个文件夹的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>

Answer 1

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

JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: