要创建动态生成的类切换效果

我一直在试图创建一个类别切换的效果，但它不工作要创建动态生成的类切换效果

有上动态生成的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 -->

来源

2013-02-21 kamal bhardwaj

您能否提供一些关于哪些工作不具体的细节？另外 - 您可能希望使用您正在使用的特定模板工具标记问题 - 这样您就可以吸引正确的知识库来提供帮助。 – 2013-02-21 20:57:45

首先抱歉更新，我不是那么好在jquery我尝试了几种方法来工作这段代码，但迄今为止都是徒劳的，真的有任何顺利的方式来创建切换效果的代码... – 2013-02-23 15:58:06

是的 - 让我发布一个快速的答案。 – 2013-02-24 17:41:07

在一般情况下，我切换这样的：

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-24 17:47:56

Thanx Alford给了我很大的帮助.... – 2013-02-27 10:06:00

如果这有助于解决您的问题，请考虑点击我答案旁边的复选框将其标记为解决方案。 :) – 2013-02-27 15:34:57

你只需要设置的事件处理程序切换元素，像这样：

$('.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-21 20:54:03

要创建动态生成的类切换效果

回答

相关问题