CSSブロックでテキストを表示/非表示する

Question

コミュニティソフトウェア（IPBoard）に小さなセクションを追加しています。下の図に示すように、cssブロックの表示/非表示をトリガーする小さな三角アイコンがあります。三角アイコンの右側にあるリンクテキストは別のURLへのハイパーリンクです。三角形のアイコンだけがcssブロックを示しています。簡単に。私は（下の写真参照）を追加しています小さな部分については

、私は（リンクは別のURLに移動していない）、このセクションのテキストを拡大する三角形のアイコンとリンクをしたいです。私は何百もの修正を加え、一般的にCSSと基本PHPを把握することはできますが、問題はありません。しかし、この崩壊して拡大しているテキストは、何時間もの試練を経て、本当に私を困惑させています。私はこれを行うための他の方法があることを知っていますが、私は可能であれ、より多くのコードをロードするのではなく、既存のテクニックを活用したいと思います。

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：

は、ここに私のHTMLコードです。 ToggleCategoryがここに登録されている

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'); 
     } 

    }, 

：ここではその関連部分は次のとおりです。

#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を

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