1

カテゴリにトグル効果を作成しようとしていますが、機能していません

IDを動的に生成する際にトグル効果を作成する方法はありますか...

私のコードは

      <!-- CATEGORIES -->
      <div id="tree_categories"> 

        <table cellpadding="0" cellspacing="0" width="100%">
          <tr> 
            <td width="{$width}%" valign="top">
        {foreach from=$array_categories item=v name=cat}
        {if !$v.parent_id}
        <a href="{if $seo_settings.enable_mod_rewrite}{seo->makeSearchCategoryLink p1=`$v.id` p2=`$v.name`}{else}{$live_site}/listings.php?category={$v.id}{/if}">
        <span class="catwrapper">
        {if $v.icon}<img src="{$live_site}/images/categories/{$v.icon}" alt="{$v.name}" />{/if}
        <span class="parent-left"><span class="parent-right" {if $v.icon}style="padding-left: 40px;"{/if}>
        {$v.name|escape:"html"}
        {if $v.ads && $appearance.categ_count_ads}({$v.ads}){/if}
        </span></span></span>
        </a>
        {if $smarty.foreach.cat.index!=$categories|@count-1}<ul>{/if}
        {else}
        <li {if $v.level}class="level{$v.level}"{/if}><a href="{if $seo_settings.enable_mod_rewrite}{seo->makeSearchCategoryLink p1=`$v.id` p2=`$v.name`}{else}{$live_site}/listings.php?category={$v.id}{/if}">{$v.name|escape:"html"} {if $v.ads && $appearance.categ_count_ads}({$v.ads}){/if}</a></li>
        {/if}
        {capture name=some_content assign=next_index}{$smarty.foreach.cat.index+1}{/capture}
        {if !$array_categories.$next_index.parent_id && $smarty.foreach.cat.index!=0 && $smarty.foreach.cat.index!=$categories|@count-1}</ul>{/if}

        {if $smarty.foreach.cat.index==$categories|@count-1 && $v.parent_id}
        </ul>
        {/if}

        {if $v.last && $smarty.foreach.cat.index!=$categories|@count-1}
        </td><td valign="top" width="{$width}%" align="left">
        {/if}
        {/foreach}
        </td>
          </tr>
        </table>
      </div>
      <!-- end CATEGORIES -->
4

2 に答える 2

1

一般的に、私は次のように切り替えます。

CSS :

ul.collapsible-list > li {
    /* put all of the styling for your expanded list items here. */
    display: block;
}
.collapsed { display: none; }

HTML :

<ul class="collapsible-list">
  <li><!-- your content to toggle goes here --></li>
  <li class="collapsed">
     <!-- your content to toggle goes here -->
  </li>
  <li class="collapsed">
     <!-- your content to toggle goes here -->
  </li>
  <li class="collapsed">
     <!-- your content to toggle goes here -->
  </li>
</ul>

jQuery :

$('.collapsible-list > li').on('click', function(ev) {
    var $el = $(el.target);
    $el.toggleClass('collapsed');
});

非常にスムーズになる理由は、CSS (ブラウザーが内部でレンダリングを最適化する) にすべての切り替えを許可しているためです。jQuery は非常に単純ですLI。それ自体をクリックすると、クラスが追加または削除されるだけです。

もちろん、これは完全な解決策ではありませんが、それがどのように行われるかの例を示します。

于 2013-02-24T17:47:56.193 に答える
0

次のように、トグル要素のイベント ハンドラーを設定するだけです。

$('.toggled_elements_class').on('click', function(){
  //some code that change class names, or other attributes on target elements, to realize needed visual effect
});
于 2013-02-21T20:54:03.053 に答える