Question

我有一个带有可折叠菜单的侧边栏，它工作正常，但所有值都扩展了初始加载时间。我希望它在加载时关闭并在之后切换。

这是使用的jquery

// Sidebar Toggle
var fluid = {
Toggle : function(){
    var default_hide = {"grid": true };
    $.each(
        ["pagesnav", "commentsnav", "userssnav", "imagesnav"],
        function() {
            var el = $("#" + (this == 'accordon' ? 'accordion-block' : this) );
            if (default_hide[this]) {

                el.hide();
                $("[id='toggle-"+this+"']").addClass("hidden");

            }
            $("[id='toggle-"+this+"']")
            .bind("click", function(e) {
                if ($(this).hasClass('hidden')){
                    $(this).removeClass('hidden').addClass('visible');
                    el.slideDown();
                } else {
                    $(this).removeClass('visible').addClass('hidden');
                    el.slideUp();
                }
                e.preventDefault();
            });
        }
    );
}
}
jQuery(function ($) {
    if($("[id^='toggle']").length){fluid.Toggle();}
});

这是html

<span class="ul-header"><a id="toggle-pagesnav" href="#" class="toggle visible">Content</a></span>
      <ul id="pagesnav">
        <li><a class="icn_manage_pages" href="#">Manage Pages</a></li>
        <li><a class="icn_add_pages" href="#">Add Pages</a></li>
        <li><a class="icn_edit_pages" href="#">Edit Pages</a></li>
        <li><a class="icn_delete_pages" href="#">Delete Pages</a></li>
      </ul>
      <!-- End Content Nav  --> 
      <!-- Start Comments Nav  --> 
      <span class="ul-header"><a id="toggle-commentsnav" href="#" class="toggle visible">Comments</a></span>
      <ul id="commentsnav">
        <li><a class="icn_manage_comments" href="#">Manage Comments</a></li>
        <li><a class="icn_add_comments" href="#">Add Comments</a></li>
        <li><a class="icn_edit_comments" href="#">Edit Comments</a></li>
        <li><a class="icn_delete_comments" href="#">Delete Comments</a></li>
      </ul>

这是使用的CSS

.toggle {
    display:block;
}
.ul-header a.visible {
    background:url('../img/icons/small/toggle_close.png') no-repeat scroll 97% 50%;
}
.ul-header a.hidden {
    background:url('../img/icons/small/toggle_open.png') no-repeat scroll 97% 50%;
}

请帮忙。

Answer 1

我认为让它们最初崩溃的最有效和最无痛的方法是在HTML中指定它们。因此，为每个导航ul-s添加class =“hidden”。

Answer 2

这是检查变量以查看是否必须隐藏块的变量。 var default_hide = {"grid": true };

将其更改为

var default_hide = {"pagesnav": true, "commentsnav": true, "userssnav": true, "imagesnav": true}

它应该有用。

或者您可以在以下情况下将其删除：

if (default_hide[this])

可折叠菜单需要在初始加载时关闭所有标题

2 个答案: