0

折りたたみ可能なフィールドセット クラスについて質問があります。ページの読み込み時に、このフィールドを CLOSED 状態で開始するにはどうすればよいですか?

次に、入力のみが表示さ<legend>れ、クリックするとフィールドセットが折りたたまれます。

Web ページにより多くのスペースが必要なので、折りたたみ可能な CLOSED のこのフィールドセットが必要です。

ありがとうございました。

編集

以下は、記載されたフィールドセットが含まれているコードです。

    <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>
4

1 に答える 1

0

次のようなことができます。

<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');
});
于 2012-11-07T23:01:32.597 に答える