Question

我正在创建许多称为书签栏的内容，但在网站内部。基本上我有一个常规的Bootstrap navbar，其中几个菜单项都有“拇指尖”。通过按下缩略图，用户可以固定该菜单项，以便快速访问我创建的侧边栏。

现在在此解释过于混乱之前，这是我当前的代码，这部分有效，但另一方面却没有。

JSFiddle

HTML

<nav id="oa-navbar" class="navbar navbar-default">
     <div class="container-fluid">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                 <li class="active">
                     <a href="#"><i class="fa fa-area-chart" aria-hidden="true"></i> Dashboard</a>
                 </li>
                 <li>
                     <a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit content</a>
                 </li>

                 <!-- PINNABLE MENU ITEM!! -->
                 <li class="pinnable">
                     <a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i> Media</a>
                 </li>
              </ul>
          </div>
     </div>
</nav>


<!-- The "Quick-Access" navbar -->
<div id="oa-toolbar">
            <div class="container-fluid">
                <div id="oa-toolbarbtn" class="oa-btn btn btn-default">
                    <i class="fa fa-bars" aria-hidden="true"></i> Quick-Access
                </div>
                <div id="oa-toolbar-pinned">

                </div>
            </div>
        </div>

JS

// Adding the "pinicon" to the pinnable link
$.each($("#oa-navbar li"), function () {
    if ($(this).hasClass("pinnable")) {
        var pinicon = '<a class="pin-it"><i class="fa fa-thumb-tack" aria-hidden="true"></i></a>';
        $(this).find("a").append(pinicon);
    }
});

// Pinning the link itself
$("#oa-navbar li .pin-it").click(function () {
    var pinMenu = $("#oa-toolbar-pinned");
    var nl_content = $(this).parent().html();
    var nl = $("<li class='pinnedItem'>"+ nl_content +"</li>");

    $(pinMenu).removeClass("active");
    if (!$(this).parent().hasClass("pinned")){
        $(nl).appendTo(pinMenu);
        $(pinMenu).addClass("active");
    }
    $(this).parent().toggleClass("pinned");

});

它现在的工作方式是它确实将菜单项添加到快速访问菜单中，但它不会使用<a>标记，而是它们内部的标记。

另一个问题是，当我再次按下导航栏上的缩略图时，它不会从快速访问菜单中删除固定项目。必须有一个简单的方法来做到这一点，但我走了很长的路。

任何建议都将受到欢迎！

Answer 1

试试这个example，实际上你已经接近了，我刚刚推翻了你的代码

$("#oa-toolbar-pinned").on('click','.pinnedItem',function () {
    var navBar = $("#oa-navbar ul li"); // find navbar
    var content = $(this).find("a").html(); 
    var appendCont = "<li class='pinnable'> <a class='pin-it' href='#'>"  + content  + "</a></li>"; // take content and surround with li
    $(appendCont).appendTo(navBar.parent()); // append to navbar
    $(this).remove(); // remove from pinned list

});

编辑1：

将点击事件更改为delegate，因为新添加的a标记无法触发点击事件，此问题已解决，

$(document).on('click', '#oa-navbar li .pin-it' ,function() {}

希望有所帮助，

将项目从导航固定到单独的侧边栏（书签）

1 个答案:

编辑1：