javascript - 将导航中的项目固定到单独的侧边栏(书签)

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() {}

希望有帮助，