Question

我对fieldset类可折叠有疑问。如何在页面加载时以CLOSED状态启动此字段？

然后人们只会看到<legend>输入，当他们点击它时，fieldset会崩溃。

我需要更多的网页空间，所以我需要这个可折叠的字段集CLOSED。

谢谢。

修改

以下是包含mentoined字段集的代码：

    <fieldset class="collapsible">
            <legend>{lang key="field_group_title_"|cat:$group_name}</legend>
        {/if}

        <table cellpadding="2" cellspacing="0" width="100%">
        {foreach from=$fields item=field}
            {assign var="key" value=$field.name}
            {assign var="field_name" value='field_'|cat:$field.name}
            {if $listing.$key || ($listing.$key eq '0')}
            <tr>
                <td style="width: 20%;"><strong>{$lang.$field_name}:</strong></td>
                <td>
                    {if ($field.type eq 'text') || ($field.type eq 'textarea') || ($field.type eq 'number')}
                        {$listing.$key}
                    {elseif $field.type eq 'checkbox'}
                        {assign var="values" value=','|explode:$listing.$key}
                        {if $values}
                            {foreach name="checkbox_iter" from=$values item=field_val}
                                {assign var="lang_key" value="field_"|cat:$field.name|cat:"_"|cat:$field_val}
                                {$lang.$lang_key}{if !$smarty.foreach.checkbox_iter.last},&nbsp;{/if}
                            {/foreach}
                        {/if}
                    {elseif $field.type eq 'storage'}
                        <a href="{$smarty.const.ESYN_URL}uploads/{$listing.$key}">{$lang.download}</a>
                    {elseif $field.type eq 'image'}
                        {assign var="image_name" value="small_"|cat:$listing.$key}
                        {assign var="image_path" value=$smarty.const.ESYN_HOME|cat:"uploads"|cat:$smarty.const.ESYN_DS|cat:$image_name}
                        {assign var="image_title_key" value=$key|cat:"_title"}
                        {assign var="image_title" value=$listing.$image_title_key}

                        {if $image_path|file_exists}
                            <a href="{$smarty.const.ESYN_URL}uploads/{$listing.$key}" target="_blank" rel="prettyPhoto">{print_img ups=true full=true fl=$image_name alt=$image_title}</a>
                        {else}
                            <a href="{$smarty.const.ESYN_URL}uploads/{$listing.$key}" target="_blank" rel="prettyPhoto">{print_img ups=true full=true fl=$listing.$key alt=$image_title}</a>
                        {/if}
                    {elseif $field.type eq 'pictures'}
                        {assign var="images" value=","|explode:$listing.$key}
                        {assign var="image_title_key" value=$key|cat:"_titles"}
                        {assign var="image_titles" value=","|explode:$listing.$image_title_key}

                        {foreach from=$images key=indx item=image}
                            {assign var="image_name" value="small_"|cat:$image}
                            {assign var="image_path" value=$smarty.const.ESYN_HOME|cat:"uploads"|cat:$smarty.const.ESYN_DS|cat:$image_name}

                            {if isset($image_titles.$indx)}
                                {assign var="image_title" value=$image_titles.$indx}
                            {else}
                                {assign var="image_title" value=''}
                            {/if}

                            {if $image_path|file_exists}
                                <a href="{$smarty.const.ESYN_URL}uploads/{$image}" rel="prettyPhoto[gal]">{print_img ups=true full=true fl=$image_name alt=$image_title}</a>
                            {else}
                                <a href="{$smarty.const.ESYN_URL}uploads/{$image}" rel="prettyPhoto[gal]">{print_img ups=true full=true fl=$image alt=$image_title}</a>
                            {/if}
                        {/foreach}
                    {elseif $field.type eq 'combo'}
                        {assign var="field_combo" value="field_"|cat:$field.name|cat:'_'|cat:$listing.$key}
                        {$lang.$field_combo}
                    {elseif $field.type eq 'radio'}
                        {assign var="field_radio" value="field_"|cat:$field.name|cat:'_'|cat:$listing.$key}
                        {$lang.$field_radio}
                    {/if}
                </td>
            </tr>
            {/if}
        {/foreach}
        </table>

        {if $group_name neq 'non_group'}
            </fieldset>

Answer 1

你可以这样做：

<fieldset>
    <legend>The legend</legend>
    <div class="frmFields hideOnLoad">
        <!-- a bunch of fields -->
    </div>
</fieldset>

在加载文档时使用此jQuery：

jQuery('fieldset').each(function() {
    jQuery(this).find('legend').on('click', function() {
        jQuery(this).parent().find('.frmFields.hidden').show().removeClass('hidden');
    });
    jQuery(this).find('.frmFields.hideOnLoad').hide().addClass('hidden');
});

启动fieldset类可折叠关闭

1 个答案: