Question

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

Triangle expands the text

对于我要添加的小部分（见下图），我想要三角形图标和链接来扩展此部分的文本（没有链接转到另一个网址）。我做了数百个其他的修改，一般可以搞清楚CSS和基本的php没问题。但经过几个小时的尝试后，这个崩溃和扩展的文本真的让我很难过。我知道还有其他方法可以做到这一点，但我想利用他们现有的技术，而不是加载更多代码，如果可以的话。

What I need

这是我的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>";

用css块显示/隐藏文本

1 个答案: