Question

我正在开发一个新网站。现在我有一个固定的位置菜单列表：

菜单html

<ul id="work-nav">
    <li class="selected">   
        <span class="label">new</span>
        <a href="#cake-film">Cake Film</a>
    </li>
    <li>
        <a href="#LOS-BANGELES">Los Bangeles</a>
    </li>
    <li>
        <a href="#museumnacht">Museumnacht - N8</a>
    </li>
    <li>
        <a href="#crosby-stills-nash">Crosby, Stills &amp; Nash</a>
    </li>
    <li>
        <a href="#meltinpot">Meltin'Pot</a>
    </li>
    <li>
        <a href="#nstore">N-store</a>
    </li>
    <li>
        <a href="#viewbook">Viewbook</a>
    </li>
    <li>
        <a href="#foodnotes">Foodnotes</a>
    </li>
</ul>

我想要它做什么，是文章的顶部（带有链接锚的id）：

文章html

<article id="#LOS-BANGELES" class="page">
    <div class="wrap">
        <div class="info">
            <p>Los Bangeles Sed eu mauris nibh. Nunc sit amet mauris vitae nibh ultricies
                volutpat id a massa. Nulla lobortis odio vel velit eleifend at elementum.
                Sed eu mauris nibh. Nunc sit amet mauris vitae nibh ultricies volutpat
                id a massa.</p>
            <p>Nulla lobortis odio vel velit eleifend at elementum</p>
        </div>
    </div>
</article>

点击视口的顶部，它应该在相关列表项下面附加文章.info div。像这样。

所需结果html

<li class="selected">
    <a href="#LOS-BANGELES">Los Bangeles</a>
</li>
<li class="info">THE INFO FROM THE LOS BANGELES ARTICLE</li>

menu

我如何实现这一目标？我正在使用航点来检查锚是否在视口中。

Jquery解决方案？

$('#work article').waypoint(function (d) {
    var $active = $(this);
    if (d === "up") {
        $active = $active.prev();
    }
    if (!$active.length) $active = $active.end();

    $('.active').removeClass('active');
    $active.addClass('active');
    /* 
    SOMEWHERE HERE I NEED TO REMOVE THE.info LI FROM THE OLD SELECTED MENU ITEM, IF EXSISTS
    AND APPEND A NEW ONE BASED ON THE ARTICLE.info DIV, BUT HOW
    */
    $('.selected').removeClass('selected');
    $('a[href=#' + $active.attr('id') + ']').addClass('selected');
});

Answer 1

// Removes any existing info items from nav
$('#work-nav .info').remove();

// Copies contents of the info div in the currently active article
var $infoContents = $active.find('.info').contents().clone();

// Create a new li.info to inject into the nav;
var $infoLI = $('<li class="info"></li>');

// Set the content of that li to our copy of the article info
$infoLI.append($infoContents);

// Add the new info li after the nav item wrapper our matched link
$('a[href=#' + $active.attr('id') + ']').closest('li').after($infoLI);

jQuery交换dom位置并附加数据

1 个答案: