水平手风琴的全宽（HTML、CSS、JQuery）

Question

I am using an horizontal accordion from here: http://www.dynamicdrive.com/dynamicindex17/haccordion.htm我在这里使用水平手风琴： http://www.dynamicdrive.com/dynamicindex17/haccordion.htm

I got it to display a full height but i'm having trouble with the width, it keeps either not working at all or generating a inline width of 500px on each list item, which I'm not sure where it is pulling it from.我让它显示一个完整的高度，但我遇到了宽度问题，它要么根本不工作，要么在每个列表项上生成 500px 的内联宽度，我不确定它是从哪里拉出来的。 I tried to upload my code to JS Fiddle but i was having trouble:( Here's the code below:我试图将我的代码上传到 JS Fiddle，但我遇到了麻烦：（下面是代码：

HTML: http://pastebin.com/4UuwJXSi HTML： http://pastebin.com/4UuwJXSi

<!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>
    <link rel="stylesheet" type="text/css" href="redo.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="../scripts/accordion.js">
        /***********************************************
        * Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
        * This notice MUST stay intact for legal use
        * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
        ***********************************************/
    </script>
    <script type="text/javascript">

haccordion.setup({
    accordionid: 'hc1', //main accordion div id
    paneldimensions: {peekw:'50px', fullw:'100%', h:'100%'},
    selectedli: [0, true], //[selectedli_index, persiststate_bool]
    collapsecurrent: false //<- No comma following very last setting!
})</script>
</head>
<body>
        <div id="hc1" class="haccordion">
            <ul>

            <li>
                <div class="hpanel">
                <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
                </div>
            </li>

            <li>
                <div class="hpanel">
                <img src="http://www.fourseasons.com/images/generated/property/langkawi/landing_pages/basics_welcome.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
                </div>
            </li>

            </ul>
        </div>
</body>

CSS: CSS：

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

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

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

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

li
{
    border: 1px solid black;
    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: Javascript：

/ * Horizontal Accordion script * Created: Oct 27th,
2009.This notice must stay intact
for usage * Author: Dynamic Drive at http: //www.dynamicdrive.com/
* Visit http: //www.dynamicdrive.com/ for full source code
* /


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
    $targetli.stop().animate({
        width: $targetli.data('hpaneloffsetw')
    }, config.speed) //expand current content
    config.$lastexpanded = $targetli
},


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
    $targetlis.each(function(i) {
        var $target = $(this).data('pos', i) //give each li an index #
        $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
        $target.click(function() {
            haccordion.expandli(config.accordionid, this)
            config.$lastexpanded = $(this)
        })
/*if (config.collapsecurrent){ //if previous content should be contracted when expanding current
                    $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
}

}

Any help on this would be great.对此的任何帮助都会很棒。 In the end I want the open accordion to take up the users full screen no matter what resolution they're in. Here's the not working JSFiddle: http://jsfiddle.net/HGh3V/最后，无论用户使用什么分辨率，我都希望打开的手风琴能够全屏显示。这是不工作的 JSFiddle： http://jsfiddle.net/HGh3V/

Note I figured out that it is not taking the 100% for a width because of the peekw value having a pixel width.注意我发现它没有采用 100% 作为宽度，因为 peekw 值具有像素宽度。 Is it taking a percentage of the peek width.它是否占窥视宽度的百分比。 How do I fix this?我该如何解决？

Answer 1

That library wasn't designed to handle % widths, nor to prevent accordions from overflowing.该库的设计目的不是为了处理 % 宽度，也不是为了防止手风琴溢出。

To fix, you need to edit haccordion.js (which you've apparently renamed "accordion.js").要解决此问题，您需要编辑haccordion.js （您显然已将其重命名为“accordion.js”）。

Change this code snippet:更改此代码段：

$targetlis.each(function(i){
    var $target=$(this).data('pos', i) //give each li an index #
    $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)

To this:对此：

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', '');

I also put the file, with the changes made, at http://pastebin.com/yXZNmn7C .我还将经过更改的文件放在http://pastebin.com/yXZNmn7C 上。

Answer 2

Your accordion is set up using the following piece of JavaScript:您的手风琴是使用以下 JavaScript 设置的：

haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'50px', fullw:'500px', h:'158px'},
  selectedli: [0, true], 
  collapsecurrent: false 
})

Simply, adjust peekw and fullw values to achieve desired accordion's width.简单地说，调整peekw和fullw值以获得所需的手风琴宽度。

水平手风琴的全宽（HTML、CSS、JQuery）

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-08-14 02:32:42

解决方案2
0 2011-08-13 23:44:00

水平手风琴的全宽（HTML、CSS、JQuery）

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-08-14 02:32:42

解决方案2 0 2011-08-13 23:44:00

解决方案1
1 已采纳 2011-08-14 02:32:42

解决方案2
0 2011-08-13 23:44:00