2

我真的不知道如何为此想出一个描述性的标题。我要做的几乎就是让这个手风琴列表项在单击时跳转到页面的另一侧。目前手风琴从左到右打开 - 但最后一个单元格没有向右跳,而是保持在原地。我怎样才能让最后一个单元格向右跳而不是留在原地。

这样做的目的是将图片放在选项卡中,并在浏览链接的开头和结尾将它们放在一起。

JSFiddle 示例- 单击最后一个单元格

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Accordion</title>
    <link rel="stylesheet" type="text/css" href="redo.css" />
</head>
<body>
    <div id="hc1" class="haccordion">
        <ul>
            <li>
                <div class="hpanel">
                    <div class="preview" id="p1"></div>
                    <div class="contentContainer">
                        <div class="content">

                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="hpanel">
                    <div class="preview" id="p2"></div>
                    <div class="contentContainer">

                    </div>
                </div>
            </li>

            <li>
                <div class="hpanel">
                    <div class="preview" id="p3"></div>
                    <div class="contentContainer">

                    </div>
                </div>
            </li>

            <li>
                <div class="hpanel">
                    <div class="preview" id="p4"></div>
                    <div class="contentContainer">
                    asdf
                    </div>
                </div>
            </li>

            <li>
                <div class="hpanel">
                    <div class="preview" id="p5"></div>
                    <div class="contentContainer">

                    </div>
                </div>
            </li>
        </ul>
    </div>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<!-- End Scripts -->
</body>

CSS

*
{
    margin:0px;
    padding:0px
}

html, body
{
    height:100%;
    width: 100%;
}

#hc1, #hc1 ul, #hc1 li
{
    height: 100%;
}

#hc1, #hc1 ul 
{
    width: 100%;
}

.preview
{
    width: 50px;
    float: left;
    height: 100%;
    background-color: #E48525
}

#p1{background-color: #231F20}
#p2{background-color: #4F4E4F}
#p3{background-color: #919191}
#p4{background-color: #C4C4C3}
#p5{background-color: #E8E8E8}
/*
#p1{background-color: red}
#p2{background-color: blue}
#p3{background-color: green}
#p4{background-color: black}
#p5{background-color: orange}
*/
.contentContainer
{
    background-color: gray;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

/* -- Start Accordion -- */
.haccordion{
padding: 0;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}

.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}
/* -- End Accordion -- */

Javascript

var haccordion={
    //customize loading message if accordion markup is fetched via Ajax:
    ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /></div>',

    accordioninfo: {}, //class that holds config information of each haccordion instance

    expandli:function(accordionid, targetli){
        var config=haccordion.accordioninfo[accordionid]
        var $targetli=(typeof targetli=="number")? config.$targetlis.eq(targetli) : (typeof targetli=="string")? jQuery('#'+targetli) : jQuery(targetli)
        if (typeof config.$lastexpanded!="undefined") //targetli may be an index, ID string, or DOM reference to LI
        {
            config.$lastexpanded.stop().animate({width:config.paneldimensions.peekw}, config.speed); //contract last opened content
            config.$lastexpanded.removeClass('active');
        }
        $targetli.stop().animate({width:$targetli.data('hpaneloffsetw')}, config.speed) //expand current content
        config.$lastexpanded=$targetli
        if($targetli.attr('class') != 'active')
        $targetli.addClass('active');
    },


    urlparamselect:function(accordionid){
        var result=window.location.search.match(new RegExp(accordionid+"=(\\d+)", "i")) //check for "?accordionid=index" in URL
        if (result!=null)
            result=parseInt(RegExp.$1)+"" //return value as string so 0 doesn't test for false
        return result //returns null or index, where index is the desired selected hcontent index
    },

    getCookie:function(Name){
        var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return null
    },

    setCookie:function(name, value){
        document.cookie = name + "=" + value + "; path=/"
    },


    loadexternal:function($, config){ //function to fetch external page containing the entire accordion content markup
        var $hcontainer=$('#'+config.ajaxsource.container).html(this.ajaxloadingmsg)
        $.ajax({
            url: config.ajaxsource.path, //path to external content
            async: true,
            error:function(ajaxrequest){
                $hcontainer.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
            },
            success:function(content){
                $hcontainer.html(content)
                haccordion.init($, config)
            }
        })
    },


    init:function($, config){
            haccordion.accordioninfo[config.accordionid]=config //cache config info for this accordion
            var $targetlis=$('#'+config.accordionid).find('ul:eq(0) > li') //find top level LIs
            config.$targetlis=$targetlis
            config.selectedli=config.selectedli || [] //set default selectedli option
            config.speed=config.speed || "normal" //set default speed

//KEY_CHANGE_BEGIN
            var maxWidth    = $targetlis.parent ().width ();
            $targetlis.each ( function () { maxWidth -= $(this).outerWidth (true); } );

            $targetlis.each(function(i){
                var $target=$(this).data('pos', i) //give each li an index #

                var lclMaxWidth     = maxWidth + $target.find ('.hpanel:eq(0)').outerWidth (true);
                $target.css ('width', config.paneldimensions.fullw);

                //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
                var hpaneloffsetw   = $target.find ('.hpanel:eq(0)').outerWidth (true);
                if (hpaneloffsetw > lclMaxWidth)
                    hpaneloffsetw   = lclMaxWidth;

                $target.data('hpaneloffsetw', hpaneloffsetw);
                $target.css ('width', '');
//KEY_CHANGE_END

                $target.click(function(){
                        haccordion.expandli(config.accordionid, this)
                    config.$lastexpanded=$(this);
                })
                if (config.collapsecurrent){ //if previous content should be contracted when expanding current
                        config.$lastexpanded.removeClass('active');
                    $target.click(function(){
                        $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed); //contract previous content
                    })
                }
            }) //end $targetlis.each
            var selectedli=haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] && haccordion.getCookie(config.accordionid))? parseInt(haccordion.getCookie(config.accordionid)) : config.selectedli[0])
            selectedli=parseInt(selectedli)
            if (selectedli>=0 && selectedli<config.$targetlis.length){ //if selectedli index is within range
                config.$lastexpanded=$targetlis.eq(selectedli)
                config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')) //expand selected li
            }
            $(window).bind('unload', function(){ //clean up and persist on page unload
                haccordion.uninit($, config)
            }) //end window.onunload
    },

    uninit:function($, config){
        var $targetlis=config.$targetlis
        var expandedliindex=-1 //index of expanded content to remember (-1 indicates non)
        $targetlis.each(function(){
            var $target=$(this)
            $target.unbind()
            if ($target.width()==$target.data('hpaneloffsetw'))
                expandedliindex=$target.data('pos')
        })
        if (config.selectedli[1]==true) //enable persistence?
            haccordion.setCookie(config.accordionid, expandedliindex)
    },

    setup:function(config){
        //Use JS to write out CSS that sets up initial dimensions of each LI, for JS enabled browsers only
        document.write('<style type="text/css">\n')
        document.write('#'+config.accordionid+' li{width: '+config.paneldimensions.peekw+';\nheight: '+config.paneldimensions.h+';\n}\n')
        document.write('#'+config.accordionid+' li .hpanel{width: '+config.paneldimensions.fullw+';\nheight: '+config.paneldimensions.h+';\n}\n')
        document.write('<\/style>')
        jQuery(document).ready(function($){ //on Dom load
            if (config.ajaxsource) //if config.ajaxsource option defined
                haccordion.loadexternal($, config)
            else
                haccordion.init($, config)
        }) //end DOM load
    }
}

haccordion.setup({
    accordionid: 'hc1', //main accordion div id
    paneldimensions: {peekw:'50px', fullw:'100%', h:'100%'},
    selectedli: [4, false], //[selectedli_index, persiststate_bool]
    collapsecurrent: false //<- No comma following very last setting!
})
4

1 回答 1

2

这是:tinker.io/f7fe4/12

这是所有版本中最简单的更改,只需将第一个预览浮动到右侧。可以通过编程方式或使用 css 完成(在 IE7+ 中可能有问题):

$('#hc1 li .preview').first().css('float','right');

或者

#hc1 li:first-child .preview {
    float:right;
}

--

这是您正在寻找的效果吗?

https://tinker.io/f7fe4/8

这是相同的效果,带有“更平滑”的动画(但它使外部 div 仍然在屏幕上)

https://tinker.io/f7fe4/9

这就是我一开始以为你在说的

https://tinker.io/f7fe4/4 (这会将最左侧的单元格弹出到右侧并打开它,有点像无限滑块)

于 2013-01-12T02:32:02.480 回答