javascript - 使用 CSS block 显示/隐藏文本

Question

我正在向一些社区软件 (IPBoard) 添加一小部分。如下图所示，它们有一个小三 Angular 形图标，可以触发 css block 的显示/隐藏。三 Angular 形图标右侧的链接文本超链接到另一个 URL。只有三 Angular 形图标显示 css block 。很容易。

对于我添加的小部分(见下图)，我想要三 Angular 形图标 和 链接来扩展该部分的文本(不要让链接转到另一个 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>";