Question

我在理解我的代码中发生的事情时遇到了问题，并希望你们中的一些人可能对它有所了解。

所以我使用jQuery slideUp和slideDown函数来显示和隐藏小屏幕的导航菜单：

function init_menu(){
    $( "#menu-button" ).click(function () {
        if ( $( "#filter-box-nav" ).is( ":hidden" ) ) {
            $( "#filter-box-nav" ).slideDown( "fast" );
        } else {
            $( "#filter-box-nav" ).slideUp("fast");
        }
    });
}

目标元素的样式是：

#filter-box-nav {
    width: 99%;
    padding-left: 1%;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    background-color: #F4FA5C;
    display: none;
}
.filter-box {
    cursor: pointer;
    list-style-type: none;
    float: left;
    margin: .5%;
    width: 17.5%;
    border: 2px solid #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

我使用的功能：

function style_nav_elements() {
    $(".filter-box").css("height", $(".filter-box:first").width());
}

调整javascript window.onload末尾的元素大小。但元素的像素大小设置为设置CSS百分比17.5％。但是当打开菜单并触发resize事件处理程序并执行更改元素时，它可以完美地运行。我的代码中发生了什么，我做错了什么？

此外，如果有任何关于如何解决这个问题的建议我很感激指点和建议。

HTML：

<nav id="filter-box-nav">
    <ul id="filter-box-container">
        <li id="work" class="filter-box"></li>
        <li id="education" class="filter-box"></li>
        <li id="webdevelopment" class="filter-box"></li>
        <li id="art" class="filter-box"></li>
        <li id="comics" class="filter-box"></li>
        <li id="design" class="filter-box"></li>
        <li id="miscellaneous" class="filter-box"></li>
        <li id="personal" class="filter-box"></li>
        <!-- <li id="Uncategorized" class="filter-box"></li> -->
    </ul>
</nav>

设置显示宽度的高度大小：无元素子元素

0 个答案: