php - 想要在动态生成的类别上创建切换效果

Question

我一直在尝试在类别上创建切换效果，但它不起作用

有什么方法可以在动态生成 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 -->

Answer 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 本身时，它只是添加或删除类。

当然，这不是一个完整的解决方案 - 但它会给您一个示例来说明它是如何完成的。