javascript - 像 github 语言统计一样滑动切换

Question

我一直在开发github非官方卡片。因此，我为此设计了一张简单的卡片，并创建了用于切换语言统计数据和一般统计数据的小脚本。

之后我在切换时意识到一个问题。

我想要它应该像 https://github.com/github/developer.github.com

您可以检查切换语言颜色:

我有问题的 html 在这里:

<div class="panel panel-default">


        <div class="panel-body" style="min-height:60px;max-height: 60px;">
                <ul id="language-stats">
                        <li>
                                <span class="color-block language-color" style="background-color:#4F5D95;"></span>
                                <span class="lang">PHP</span>
                                <span class="percent">64.5%</span>
                        </li>
                        <li>
                                <span class="color-block language-color" style="background-color:#ccc;"></span>
                                <span class="lang">Smarty</span>
                                <span class="percent">19.6%</span>
                        </li>
                        <li>

                                <span class="color-block language-color" style="background-color:#563d7c;"></span>
                                <span class="lang">CSS</span>
                                <span class="percent">7.9%</span>

                        </li>
                        <li>

                                <span class="color-block language-color" style="background-color:#f1e05a;"></span>
                                <span class="lang">JavaScript</span>
                                <span class="percent">6.4%</span>

                        </li>
                        <li>

                                <span class="color-block language-color" style="background-color:#e44b23;"></span>
                                <span class="lang">HTML</span>
                                <span class="percent">1.6%</span>

                        </li>

                </ul>
                <ul id="general-stats">
                    <li><i class="fa fa-history"></i> <small>22 commits</small></li>

                    <li><i class="fa fa-star"></i> <small>5 stars</small></li>

                    <li><i class="fa fa-code-fork"></i> <small>3 forks</small></li>
                </ul>
        </div>
            <div class="languages" data-toggle="tooltip" data-placement="bottom" title="Click for language details">
                <span class="language-color" aria-label="PHP 64.5%" style="width:64.5%; background-color:#4F5D95;" itemprop="keywords">PHP</span>
                <span class="language-color" aria-label="Smarty 19.6%" style="width:19.6%; background-color:#ccc;" itemprop="keywords">Smarty</span>
                <span class="language-color" aria-label="CSS 7.9%" style="width:7.9%; background-color:#563d7c;" itemprop="keywords">CSS</span>
                <span class="language-color" aria-label="JavaScript 6.4%" style="width:6.4%; background-color:#f1e05a;" itemprop="keywords">JavaScript</span>
                <span class="language-color" aria-label="HTML 1.6%" style="width:1.6%; background-color:#e44b23;" itemprop="keywords">HTML</span>

        </div>
</div>

CSS

body {
            padding:20px;
        }
        .languages {
            padding:0;
        }
        .languages {
            display: table;
            width: 100%;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            overflow: hidden;
            border: 1px solid #ddd;
            border-top: 0;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .languages .language-color {
            display: table-cell;
            line-height: 7px;
            text-indent: -9999px;
        }

        #general-stats {
            padding:0;
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        #general-stats li {
            text-align: center;
            display: table-cell;
        }
        #language-stats {
            padding:0;
            display: none;
            width: 100%;
            table-layout: fixed;
        }
        #language-stats li {
            text-align: center;
            display: table-cell;
        }
        li .language-color {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

我有问题的js在这里:

<script>
    function toggleLanguages() {
        $('#language-stats').toggle( 'slide', {direction:'up'} , 300);
    }
    function toggleGeneralStats() {
        $('#general-stats').toggle( 'slide', {direction:'up'} , 300);
    }
    $('.languages').click(function() {
        if($('#general-stats').css('display') == "none") {
            $('#general-stats').toggle( 'slide', {direction:'up'} , 300, toggleLanguages());
        } else {
            $('#language-stats').toggle( 'slide', {direction:'up'} , 300, toggleGeneralStats());
            $('#language-stats').css('display','table');
        }

    });
</script>

http://jsfiddle.net/fyww2t4n/

亲切的问候。

Answer 1

您可以将 overflow:hidden 添加到 .panel-body