手风琴不能正常工作答案

【问题标题】：Accordion not working properly手风琴不能正常工作
【发布时间】：2023-03-06 08:14:01
【问题描述】：

我必须展示一些类似于手风琴的功能 jquery所以我做了一个jquery的自定义函数来产生效果。

有一个网格视图，其中有两个 div，这里是代码。

<asp:GridView ID="grdAccordion" runat="server" AutoGenerateColumns="false" Width="200px">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="myFirstDiv" onclick="testToggle(this)">
                        <%#Eval("Name")%>
                            <div class="mySecondDiv" style="display:none">
                           <%#Eval("Person_Name")%> 
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

第二个 div 有 style 属性 display none。默认情况下所有的 div 都是关闭的。

比我做了一个js函数，它使用toggle函数来执行动作代码。

function testToggle(testDiv) {
        debugger
            var sntHdnValue = $('#hdnSetFlag').val();
            if (sntHdnValue == 1) {
                $(testDiv).find('div:first').show().attr('isOpen', 'true');
            }
            else {
             $(testDiv)
            .parents('table:first')
            .find('div[isOpen=true]').removeAttr('isOpen').toggle('slow');
            $(testDiv).find('div:first').show().attr('isOpen', 'true');
            }
            sntHdnValue++;
            $('#hdnSetFlag').val(sntHdnValue);
        }

在这里，我利用了隐藏字段，让我知道它是初始状态每件事都已关闭我正在添加一个自定义 attr isopen 以供我识别

1）目前的情况是这个在加载时应该关闭所有东西。 2) 一次只能打开一个 div。

这工作正常。

问题是如果我点击我点击打开的同一个 div 它有两个自定义 attr isopen 现在它打破了第二种情况。如何解决。

【问题讨论】：

标签： javascript jquery asp.net jquery-plugins

【解决方案1】：

解决了。

更新的功能。

 var glDivID = 0;
        function testToggle(testDiv) {
        debugger
        var sntHdnValue = $('#hdnSetFlag').val();
        var dvID = $(testDiv).attr('id');
        if (sntHdnValue == 1) {
                $(testDiv).find('div:first').show().attr('isOpen', 'true');
            }
            else {
             $(testDiv)
            .parents('table:first')
            .find('div[isOpen=true]').removeAttr('isOpen').toggle('slow');
             if (glDivID != dvID) {
                 $(testDiv).find('div:first').show().attr('isOpen', 'true');
             }
            }
            sntHdnValue++;
            $('#hdnSetFlag').val(sntHdnValue);
            glDivID = dvID;
        }

我在将数据添加到网格时附加了一个 id。检查了相同的内容以测试它是否是自点击的，它可以解决问题

【讨论】：