Question

我有一个页脚列表：

<footer id="footer">
    <ul>
        <li>
            <h2> x </h2>
            <h3> xx  </h3>
            <p>xxx</p>
            <p> xxxx </p>
        </li>
        <li>
            <h2> x  </h2>
            <h3> xx </h3>
            <p>xx </p>
            <p> xx </p>
        </li>
        <li>
            <h2> x </h2>
            <h3> xx </h3>
            <p>xx</p>
            <p> xxx</p>
        </li>
    </ul>
</footer>

点击两个单独的链接弹出，如下所示：

$(document).ready(function() {
    $( "#add" ).click(function() {
        $( "#footer" ).toggle( "fast" );
    });
});

$(document).ready(function() {
    $( "ul li:eq(3)" ).click(function() {
        $( "#footer" ).toggle( "fast" );
    });
});

我希望这些ul盒子在点击它们当前的popout链接之后，按顺序依次填充内容，或者让盒子自己一次弹出一个。在我能做得更好的地方输入也很有帮助;我是菜鸟。额外奖励：当再次点击这两个链接关闭时，如何让盒子按顺序恢复？谢谢大家。

编辑：弹出页脚的两个链接在这里，联系人链接和手机图像：

        <section id="side">
            <nav class="sidebar"><img class="logo" src="images/logo.png"></img>
                <ul>
                    <li> <a href="#"> About </a></li>
                    <li> <a href="docs.html"> Providers </a></li>
                    <li> <a href="#"> Quality </a> </li>
                    <li> <a href="#"> Contact </a> </li>
                </ul>
                <img id="add" src="images/phoner.png"></img>
            </nav>
        </section>

Answer 1

https://jsfiddle.net/m173gxvg/3/

这样的东西？如果是，以下是修改：

从页脚css中删除display：none 将display：none添加到页脚ul li css 修改javascript代码

这是点击后使用的js：

toggleTimer=500;
    $( "#footer" ).find("ul").find("li").each(function() { 
        jQuery(this).toggle(toggleTimer);
        toggleTimer=toggleTimer+500;
    });

Answer 2

我想你想点击每一个，然后显示下一个，是吗？然后，您可以使用.next（）jquery属性来指定单击侦听器以切换下一个元素。

$(document).ready(function() {
    //start with all LI hidden
    $('#footer').find('li').hide();
    //add click listener to the id='add' element to toggle the first LI
    $( "#add" ).click(function() {
            //if none are visible, show the first one, else hide them all
            if ($('#footer').find('li').first().css('display') == 'none' ) {
                //show the fist LI
                $( "#footer" ).find('li').first().toggle( "fast" );
            } else {
                //hide them all
                $('#footer').find('li').hide();
            }
        });
    //add listener to each LI to toggle the NEXT one
    $('#footer').find('li').click(function(){
        $(this).next().toggle("fast");
    });
});

......发表评论后......

或者您可以在每次点击时显示第一个隐藏的一个：

$(document).ready(function() {
    //start with all LI hidden
    $('#footer').find('li').hide();
    //add click listener to the id='add' element to toggle the first LI
    $( "#add" ).click(
        function() {
            //if NO LI are hidden, hide them all, else show one at a time
            if ( $('#footer').find('li:hidden').size()==0 ) {
                //hide them all
                $('#footer').find('li').hide();     
            } else {
                //show the first hidden LI
                $('#footer').find('li:hidden').first().show('fast');
            }
        }
    );
});

这就是你要找的东西吗？

Answer 3

这样的事可能吗？

$(document).ready(function() {
    var $footer = $("#footer").hide(),
        $footerItems = $footer.find("ul li").hide(),
        footerState = 0;
    $("#add, .sidebar ul li").click(function (e) {
        e.preventDefault();
        footerState = !footerState;
        var method = footerState ? 'show' : 'hide';
        if(footerState) $footer.show();
        $footerItems.get().reduce(function (p, li) {
            return p.then(function() {
                return $(li)[method]('slow').promise();
            });
        }, $.when()).then(function() {
            if(!footerState) $footer.hide();
        });
    });
});

<强> DEMO

按顺序弹出li项目框jQuery

3 个答案: