用css块显示/隐藏文本

Question

我正在为一些社区软件（IPBoard）添加一小段。如下图所示，它们有一个小三角形图标，用于触发CSS块的显示/隐藏。三角形图标右侧的链接文本超链接到另一个URL。只有三角图标显示css块。很简单。

对于小部分我加入（见下图），我想的三角形图标和的链接，扩大了本节的文本（没有链接到另一个URL）。我做了数以百计的其他修改，通常可以找出CSS和基本的PHP是没有问题的。但是，经过几个小时的努力，这种崩溃和扩大的文本真的让我感到困惑。我知道还有其他的方法可以做到这一点，但是如果可以的话，我想利用他们现有的技术，而不是加载更多的代码。

这里是我的HTML代码：

echo "<ul id='idm_categories'>"; 
    echo "<li class='with_sub closed'>"; 

     echo "<a href='#' id='not sure what would go here'>Scripture</a>"; 

      //Begin Hidden text that will display 
      echo "<ul class='subforums' style='display: none'>"; 
       echo "<li><a href='http://link here' title='Go to category'>Pentateuch (Gen-Deu)</a></li>"; 


      echo "</ul>"; 
      //End hidden text 


      //This makes the show/hide text possible but not sure how it works... 
      echo "<a href='#' class='cat_toggle'>Toggle</a>"; 

     echo "</li>"; 

echo "</ul>"; 

的HTML CSS引用。这里，相关的部分是：

#idm_categories a.cat_toggle { 
    text-indent: -2000em; 
    width: 12px; 
    height: 12px; 
    position: absolute; 
    left: 8px; 
    top: 11px; 
    padding: 0; 
} 

    #idm_categories > li.with_sub.closed > a.cat_toggle { 
     background: url({style_images_url}/folder_closed.png) no-repeat; 
    } 

    #idm_categories > li.with_sub.open > a.cat_toggle { 
     background: url({style_images_url}/folder_open.png) no-repeat; 
    } 

    #idm_categories > li { 
     /*border-bottom: 1px solid #f3f3f3;*/ 
     position: relative; 
     padding: 0px; 
    } 

     #idm_categories > li:last-child { 
      border: 0; 
     } 

     #idm_categories > li > a { 
      display: block; 
      padding: 10px 10px 5px 25px; 
     } 

     #idm_categories > li.selected > a { 
      font-weight: bold; 
      background: #4B76AD; 
      color: #fff; 
     } 

    #idm_categories .file_count { 
     font-size: 9px; 
     padding: 1px 3px; 
     font-weight: bold; 
     color: #528F6C; 
     background: #DFEBF7; 
     -moz-border-radius: 3px; 
     -webkit-border-radius: 3px; 
     border-radius: 3px; 
     margin: 11px 8px 0 0; 
    } 

    #idm_categories ul.subforums { 
     margin: 0px 0 10px 35px; 
     font-size: 0.9em; 
     line-height: 1.5; 
    } 

与此相关的JavaScript：

toggleCategory: function(e, elem) 
    { 
     Event.stop(e); 

     var group = $(elem).up('li'); 
     var subgroup = $(group).down('.subforums'); 

     if(!$(group) || !$(subgroup)) 
     { 
      Debug.write("Can't find parent or subforums"); 
      return; 
     } 

     if($(group).hasClassName('closed')) 
     { 
      new Effect.BlindDown($(subgroup), { duration: 0.2 }); 
      $(group).removeClassName('closed').addClassName('open'); 
     } 
     else 
     { 
      new Effect.BlindUp($(subgroup), { duration: 0.2 }); 
      $(group).removeClassName('open').addClassName('closed'); 
     } 

    }, 

ToggleCategory在这里注册：

ipb.delegate.register('.cat_toggle', ipb.idmportal.toggleCategory); 

Answer 1

这是很难知道没有看到整个的javascript图书馆，但有几件事你可以尝试。取决于如何添加onclick事件处理程序，它可能会工作。

echo "<a href='#' class='cat_toggle' id='not sure what would go here'>Scripture</a>"; 

也可能这会工作，但我怀疑它根据您在上面显示的代码：

echo "<a href='#' class='closed' id='not sure what would go here'>Scripture</a>";