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 回答