Question

我在页面中有一个搜索选项列表，我可以使用某个折叠按钮隐藏，例如单击此处。现在我想默认将此选项折叠。即使用户想要扩展，他也可以使用此按钮进行扩展。我该怎么做这个默认值？

我在ascx页面中的代码是这样的。

 <span class="hintText">
            <asp:Label ID="lblClickHere" runat="server" Text="(click Here)"       meta:resourcekey="lblClickHereResource1"></asp:Label>
        </span>

我有一个用于扩展和折叠的图标。图标显示的代码是：

 <asp:ImageButton ID="showhide" runat="server" ImageAlign="AbsMiddle" ImageUrl="../common/images/show-icon.png"
            Height="21" Width="21" OnClientClick="javascript:return controlSearchBar();" />

要扩展和折叠，我已经写了一些java脚本。默认情况下，它将显示所有选项。我的java脚本在这里：

 $(document).ready(function () {
    $('#<%=searchBar.ClientID%>').show();
    $('#<%=showhide.ClientID%>').attr("title", "Hide SearchBar")
    $('#<%=showHideFlag.ClientID%>')[0].value = "showing";
    $('#<%=showhide.ClientID%>').attr("src", "../common/images/hide-icon.png");
});

function controlSearchBar() {
    if ($('#MainContent_ProjectListControl_searchBar').is(":hidden")) {
        $('#MainContent_ProjectListControl_searchBar').slideDown("fast");
        $('#MainContent_ProjectListControl_showhide').attr("src", "../common/images/hide-icon.png");
        $('#MainContent_ProjectListControl_showhide').attr("title", "Hide SearchBar")
        $('#MainContent_ProjectListControl_showHideFlag')[0].value = "showing";
    } else {
        $('#MainContent_ProjectListControl_searchBar').slideUp("fast");
        $('#MainContent_ProjectListControl_showhide').attr("src", "../common/images/show-icon.png");
        $('#MainContent_ProjectListControl_showhide').attr("title", "Show SearchBar")
        $('#MainContent_ProjectListControl_showHideFlag')[0].value = "hiding";
    }

任何人都可以帮忙吗？按钮的展开和折叠应通过分页和标签更改保留其会话。

Answer 1

默认情况下，您可以将serchBar折叠为controlSearchBar，如下所示。

Jquery代码：

 $(document).ready(function () {
    $('#<%=searchBar.ClientID%>').show();
    $('#<%=showhide.ClientID%>').attr("title", "Hide SearchBar")
    $('#<%=showHideFlag.ClientID%>')[0].value = "showing";
    $('#<%=showhide.ClientID%>').attr("src", "../common/images/hide-icon.png");

    controlSearchBar();
});

但下面是一个更好的解决方案。

ascx代码：

<asp:ImageButton ID="showhide" runat="server" ImageAlign="AbsMiddle" ImageUrl="../common/images/show-icon.png"
            Height="21" Width="21" OnClientClick="javascript:return switchSearchBar();" />

Jquery代码：

 $(document).ready(function () {
    controlSearchBar(true);
});

function switchSearchBar() {
    if ($('#MainContent_ProjectListControl_searchBar').is(":hidden")) {
        controlSearchBar(true);
    } else {
        controlSearchBar(false);
    }
}

function controlSearchBar(show) {
    if (show) {
        $('#MainContent_ProjectListControl_searchBar').slideDown("fast");
        $('#MainContent_ProjectListControl_showhide').attr("src", "../common/images/hide-icon.png");
        $('#MainContent_ProjectListControl_showhide').attr("title", "Hide SearchBar")
        $('#MainContent_ProjectListControl_showHideFlag')[0].value = "showing";
    } else {
        $('#MainContent_ProjectListControl_searchBar').slideUp("fast");
        $('#MainContent_ProjectListControl_showhide').attr("src", "../common/images/show-icon.png");
        $('#MainContent_ProjectListControl_showhide').attr("title", "Show SearchBar")
        $('#MainContent_ProjectListControl_showHideFlag')[0].value = "hiding";
    }
}

Answer 2

您是否考虑过jQuery手风琴（或引导程序）？

http://jqueryui.com/accordion/

您可以减少正在编写的代码量

隐藏ascx页面中的一些选项

2 个答案: