0

任务：单击li导航过滤器显示和隐藏带有过渡淡入淡出的内容。

问题 我只是在猜测并检查在哪里放置这个淡入//淡出过渡。此外，我觉得我的代码效率太低，因为我使用了 4 个条件语句。堆栈会引导我创建一个解决方案来改进这个脚本的整体逻辑，这样我就可以做出一个漂亮的过渡：c？

实时代码

jQuery 脚本

$(document).ready(function () {

//attach a single click listener on li elements
$('li.navCenter').on('click', function () {

    // get the id of the clicked li
    var id = $(this).attr('id');

    // match current id with string check then apply filter
    if (id == 'printInteract') {
        //reset all the boxes for muliple clicks 
        $(".box").find('.video, .print, .web').closest('.box').show();

        $(".box").find('.web, .video').closest('.box').hide();

        $(".box").find('.print').show();
    }

    if (id == 'webInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
        $(".box").find('.print, .video').closest('.box').hide();
        $(".box").find('.web').show();
    }
    if (id == 'videoInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
        $(".box").find('.print, .web').closest('.box').hide()
        $(".box").find('.video').show();
    }
    if (id == 'allInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
    }



});

选定的 HTML

<nav>
<ul class="navSpaces">
    <li id="allInteract" class="navCenter">
        <a id="activeAll" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a>
    </li>
    <li id="printInteract" class="navCenter">
        <a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3>print</h3></div></a>
    </li>
    <li id="videoInteract" class="navCenter">
        <a id="activeVideo" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/video.gif" /><h3>video</h3></div></a>
    </li>
    <li id="webInteract" class="navCenter">
        <a id="activeWeb" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/web.gif" /><h3>web</h3></div></a>
    </li>
</ul>

框 HTML

<div class="box">
<h1 title="Light me up"></h1>
<div class="innerbox">
    <figure>
        <img src="" />
    </figure>
    <ul class="categorySelect">
        <li class="print"></li>
        <li class="video"></li>
        <li class="web"></li>
    </ul>
</div>

附言。抱歉新手问题

4

1 回答 1

3

您可以简化代码并添加如下转换：

$(document).ready(function () {
    //attach a single click listener on li elements
    $('li.navCenter').on('click', function () {
        var all = $(".box").find('.video, .print, .web');
        var activeCls = "." + this.id.replace("Interact", "");
        if (activeCls == ".all") {
            all.closest('.box').show();
        } else {
            var active = $(".box").find(activeCls);
            active.closest('.box').show();
            all.not(active).closest('.box').hide();
        }
    });
});

当你有这个工作时，你可以用你选择的 jQuery 转换来代替.show()and.hide()调用。

我假设您想要隐藏/显示.box每个项目的容器，但是没有看到您隐藏和显示的内容的真实页面 HTML，我无法确定这是您想要做的。hide()无论您隐藏/显示什么，您都希望在show()原始代码中保持一致。

在选择要使用的过渡时，您需要使用在删除/添加多个项目时效果很好的东西。fadeIn() 和 fadeOut() 这样可能不会很好地工作，因为当项目最终淡出时，剩余的项目会跳来跳去。我不确定什么会最有效。也许将宽度设置为零。

于 2012-06-07T04:24:03.323 回答