本帖最后由 shuijing2486 于 2013-03-12 19:51:22 编辑

解决方案 »

  1.   

    红色的加上
    $('li' , $('#options')).click(function(){
                    $('#settings').html($(this).html());
                    $('ul[id^=demo]' , $('#list')).hide();
                    $('.cur' , $('#options')).removeClass('cur').addClass('navlink');
                    $('#demo'+ ($(this).index()+1)).show();
                    $(this).removeClass('navlink').toggleClass("cur");
                    $('#options').slideUp();                
                    $('#wrapper').scrollTop(0);
                });
      

  2.   

    $(document).ready(function(){
    var myScroll = new iScroll('wrapper');
                $('#options').hide();
                $('#settings').click(function(){
                    $('#options').slideToggle();
                    $(this).toggleClass("cerrar");
                });
                $('li' , $('#options')).click(function(){
                    $('#settings').html($(this).html());
                    $('ul[id^=demo]' , $('#list')).hide();
                    $('.cur' , $('#options')).removeClass('cur').addClass('navlink');
                    $('#demo'+ ($(this).index()+1)).show();
                    $(this).removeClass('navlink').toggleClass("cur");
                    $('#options').slideUp();
    myScroll.scrollTo(0,0,100);
                });
            });
      

  3.   

    可能是标签的问题。。用attr属性设置不行。。改这样的可以
    $('#options').slideUp();
    $('#wrapper').get(0).scrollTop=0
      

  4.   

    我能不能请教一下,3个ul列表长度都不一样,c拉到后面就空白了,如果想让其高度按照其内容变化,可以吗?
      

  5.   

    受各位大仙的启发,改了下楼主的例子,同时也解决了楼主问的问题。请各位验证!
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
        <title>首页</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="iscroll.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var items = [30,50,100];            var myScroll = new iScroll('wrapper', {checkDOMChanges:true});
                $('#options').hide();
                $('#settings').click(function () {
                    $('#options').slideToggle();
                    $(this).toggleClass("cerrar");
                });
                $('li', $('#options')).click(function () {
                    $('#settings').html($(this).html());
                    $('ul[id^=demo]', $('#list')).hide();
                    $('.cur', $('#options')).removeClass('cur').addClass('navlink');
                    var idx = $(this).index() + 2;
                    var demo = $('#demo' + idx);
                    if (demo.length == 0) {
                        var ul = $('<ul id="demo' + idx + '"></ul>');
                        var html = '';
                        for (i = 0; i < items[idx - 2]; i++) {
                            html += '<li>'+(idx - 2)+':'+ i +'</li>';
                        }
                        ul.append(html);
                        $('#list').append(ul);
                    } else {
                        demo.show();
                    }
                    $(this).removeClass('navlink').toggleClass("cur");
                    $('#options').slideUp();
                    myScroll.scrollTo(0, 0, 100);
                });
            });
        </script>
        <style>
            *{ padding:0; margin:0; border:0;}
            a{ text-decoration:none;}
    li{ list-style:none;}
            #header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;}
            #settings {background: #c40000 ;width: 110px; height:69px; float:right; position:fixed; top:0; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; text-align: center;}
            .cerrar {background: #c40000 ;  borer-bottom:#c40000 solid 2px;line-height:3em;  z-index:3;}
            #options {position:fixed; top:69px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
            .cur{ background: #333;}
            .cur,.navlink {width:100%; height:60px; line-height:60px; color: white; border-bottom: #b00303 solid 1px;  border-top: #dc0c0c solid 1px; font-size:1.4em;}
    #wrapper {position:absolute;z-index:1;top:69px; bottom:0; left:0;width:100%;background:#f3f3f3;overflow:auto;}
            .list{ position:absolute; top:0; font-size:20px; }
        </style>
    </head>
    <body>
    <div id="header"></div>
    <div id="settings">选项1</div>
    <ul id="options">
        <li class="cur">选项1</li>
        <li class="navlink">选项2</li>
        <li class="navlink">选项3</li>
    </ul>
    <article id="wrapper">
    <div id="list">
        <ul id="demo1" style="display:block;">
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    <li>aaaaaa</li>
    </ul>
    </div>
    </article>
    </body>
    </html>