用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>";