展开可折叠面板的箭头不起作用 [英] Expand Arrow for collapsible panel is not working

问题描述

我有一个复选框，后跟一个链接，然后是一个可折叠的面板箭头。当我单击复选框或链接时，可折叠面板必须展开。现在的问题是，当我点击复选框或链接时，面板箭头不会旋转。我使用的代码是

I have a checkbox followed by a link and then a collapsible panel arrow. When I click on the checkbox or the link a collapsible panel must expand. Now the issue is that when I click on either the checkbox or the link the panel arrow does not rotate. The code that I have used is

<asp:PlaceHolder ID="phSchoolOfTheRegion" runat="server" Visible="false">
        <div class="styled sign-off">
            <fieldset>
                <div class="fright w305 margin-top-12">
                    <p style="margin-removed-2px;">
                        <asp:Literal ID="LabeluxSchoolOfTheRegionCreated" runat="server"></asp:Literal></p>
                    <p style="margin-removed-19px;">
                        <asp:Literal ID="LabeluxSchoolOfTheRegionRemoved" runat="server"></asp:Literal></p>
                </div>
                <ol class="margin-bottom-0 collapsible-checkbox-container">
                    <li class="header" style="float: left !important; width: 100% !important;">
                        <asp:CheckBox ID="uxSchoolOfTheRegion" runat="server" data-collapsiblepanel="uxDivSchoolOfTheRegion" CssClass="uxSignOffCollaps-1x"  AutoPostBack="true" OnCheckedChanged="uxSchoolOfTheRegion_CheckedChanged" />
                        <a href="java<!-- no -->script:{}" style="font-weight:bold; color:black;" class="panel-toggle-link" data-togglepanel="<%=uxDivSchoolOfTheRegion.ClientID%>">School of the Region</a>
                    </li>
                </ol>
                <span class="signoff-collapse-head collapsible-heading">colapse</span>
                <asp:Panel id="uxDivSchoolOfTheRegion" CssClass="sign-off-form-wrapper showhide-heading" runat="server" DefaultButton="btnSaveSchoolOfTheRegion">
                    <ol class="sign-off paddingLeft-20 margin-bottom-0">
                        <li>
                            <asp:Label runat="server" Text="State the decrease in car use and the dates:" AssociatedControlID="uxDecreaseCarUse"></asp:Label>
                            <asp:HiddenField ID="HiddenFieldSchoolOfTheRegionID" runat="server" />
                        </li>
                        <li>
                            <asp:RequiredFieldValidator ID="rvDecreaseCarUse" Enabled="true" ValidationGroup="SaveSchoolOfTheRegion" runat="server"

                                ErrorMessage="" Text="*" ControlToValidate="uxDecreaseCarUse" CssClass="required"><span>* Please state the decrease in car use and the dates</span></asp:RequiredFieldValidator>
                        </li>
                        <li>
                            <asp:TextBox ID="uxDecreaseCarUse" runat="server" MaxLength="100" ValidationGroup="SaveSchoolOfTheRegion"></asp:TextBox>
                        </li>
                        <li>
                            <asp:Label runat="server" Text="Top 3 achievements - what was the impact, who was affected, who participated?" AssociatedControlID="uxTop3Achievements"></asp:Label>
                        </li>
                        <li>
                            <asp:RequiredFieldValidator ID="rvTop3Achievements" Enabled="true" ValidationGroup="SaveSchoolOfTheRegion" runat="server"

                                ErrorMessage="" Text="*" ControlToValidate="uxTop3Achievements" CssClass="required">
                            <span>* Please state top 3 achievements - what was the impact, who was affected and who participated</span></asp:RequiredFieldValidator>
                        </li>
                        <li>
                            <asp:TextBox ID="uxTop3Achievements" runat="server" MaxLength="500" TextMode="MultiLine" Rows="5" CssClass="MultiLineTextArea"

                                data-span="uxTop3AchievementsCountdown" ValidationGroup="SaveSchoolOfTheRegion"></asp:TextBox>
                            <br />
                            <div class="width80p">
                                <span id="uxTop3AchievementsCountdown" class="countdown" style="float: right;">500 characters remaining.</span>
                            </div>
                        </li>
                        <li>
                            <asp:Label runat="server" Text="Why does the school deserve the award? Include information:" AssociatedControlID="uxWhyDeserveAward"></asp:Label>
                        </li>
                        <li>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Enabled="true" ValidationGroup="SaveSchoolOfTheRegion" runat="server"

                                ErrorMessage="" Text="*" ControlToValidate="uxWhyDeserveAward" CssClass="required">
                            <span>* Please state why does the school deserve the School Of The Region</span></asp:RequiredFieldValidator>
                        </li>
                        <li>
                            <asp:TextBox ID="uxWhyDeserveAward" runat="server" MaxLength="500" TextMode="MultiLine" Rows="5" CssClass="MultiLineTextArea"

                                data-span="uxWhyDeserveAwardCountdown" ValidationGroup="SaveSchoolOfTheRegion"></asp:TextBox>

                            <br />
                            <div class="width80p">
                                <span id="uxWhyDeserveAwardCountdown" class="countdown" style="float: right;">500 characters remaining.</span>
                            </div>
                        </li>
                        <li class="sign-off-button-row">
                            <p>
                                <asp:Button ID="btnSaveSchoolOfTheRegion" runat="server" Text="Save" CssClass="button" ValidationGroup="SaveSchoolOfTheRegion"

                                    OnClick="btnSaveSchoolOfTheRegion_Click" />
                            </p>
                            <p class="paddingLeft-20">
                                <asp:ValidationSummary ID="vsSaveSchoolOfTheRegion" ValidationGroup="SaveSchoolOfTheRegion" runat="server"

                                    HeaderText="Please complete all of the fields before saving." CssClass="alert validation CustomVs" />
                            </p>
                        </li>
                    </ol>
                </asp:Panel>
            </fieldset>
        </div>
    </asp:PlaceHolder>
                    </li>

<script type="text/javascript">

if ($("#<%=HiddenFieldSchoolOfTheRegionID.ClientID %>").val() == '' && document.getElementById("<%=uxSchoolOfTheRegion.ClientID %>").checked == true) {
            $("#<%=uxDivSchoolOfTheRegion.ClientID %>").css("display", "block");
        }

Can anyone please help me to fix the issue to change the behavior of the panel arrow on clicking the link or checkbox. The arrow behavior changes only when I particualry click on the arrow.

Can anyone please help me to fix the issue to change the behavior of the panel arrow on clicking the link or checkbox. The arrow behavior changes only when I particualry click on the arrow.

推荐答案

(\"#<%=HiddenFieldSchoolOfTheRegionID.ClientID %>\").val() == '' && document.getElementById(\"<%=uxSchoolOfTheRegion.ClientID %>\").checked == true) {

("#<%=HiddenFieldSchoolOfTheRegionID.ClientID %>").val() == '' && document.getElementById("<%=uxSchoolOfTheRegion.ClientID %>").checked == true) {

(\"#<%=uxDivSchoolOfTheRegion.ClientID %>\").css(\"display\", \"block\");
}

("#<%=uxDivSchoolOfTheRegion.ClientID %>").css("display", "block"); }

Can anyone please help me to fix the issue to change the behavior of the panel arrow on clicking the link or checkbox. The arrow behavior changes only when I particualry click on the arrow.

Can anyone please help me to fix the issue to change the behavior of the panel arrow on clicking the link or checkbox. The arrow behavior changes only when I particualry click on the arrow.

这篇关于展开可折叠面板的箭头不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！