javascript - JQuery Accordion - 最后一个单元格的反面

标签 javascript jquery jquery-ui-accordion

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

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

JSFiddle Example - 单击最后一个单元格

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!
})

最佳答案

这里是:tinker.io/f7fe4/12

这是所有版本中最简单的更改，只需将第一个预览 float 到右侧即可。可以通过编程或使用 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 (这会将最左侧的单元格弹出到右侧并打开它，有点像无限 slider )

关于javascript - JQuery Accordion - 最后一个单元格的反面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14289102/

上一篇：javascript - 如何检查img src是否加载

下一篇：javascript - 检测ajax响应的MIME类型

相关文章：

javascript - 如何双重嵌套 Angular ng-repeat

javascript - math js - 变量的位置

javascript - 在鼠标单击事件上停止音轨

jQuery UI Accordion 无法以编程方式打开第三个面板

javascript - 你如何解决 yarn.lock 中的 Git 冲突

javascript - 如何将数据从 JavaScript 发送到 Python

jquery - wordpress页面闪烁

internet-explorer-7 - 当嵌入父容器中并溢出 :auto set 时，JQueryUI Accordion 在 IE7 中损坏

javascript - 动态创建脚本 : readyState never "complete"

javascript - 从 iframe 内访问父 Javascript 函数？

©2024 IT工具网  联系我们