单击取消按钮，折叠属性停止工作答案

【问题标题】：Clicking a cancel button and the collapse attribute stops working单击取消按钮，折叠属性停止工作
【发布时间】：2019-12-20 00:33:53
【问题描述】：

我有以下按钮和 div：

<button id="button2" class="btn btn-success btn-block" type="button" data-toggle="collapse" data-target="#collapseGroupTwo" aria-expanded="false" aria-controls="collapseGroupTwo">
    <span style="float: left" id="span2a">Add New User</span>
    <span id="span2" class="glyphicon-plus" style="float: right; font-weight: bold"> 
    </span>
</button>

<div id="collapseGroupTwo" class="collapse">
    //snip
</div>

<script>
    $('#button2').click(function () {
        $('#span2').toggleClass("glyphicon-minus")
    })
</script>

当用户在 cancelUpdateUser 上点击“取消”时，会运行以下 JS：

<script type="text/javascript">
    $(document).ready(function () {
        $('#cancelUpdateUser').click(function () {
            $('#button3').hide();
            $('#collapseGroupThree').hide();
            $('#button2').show();

            document.getElementById("updateUserForm").reset();
        })
    })
</script>

应该隐藏 collapseGroupThree 和 button3 并显示 button2 并允许单击 button2 来展开其伴随的 collapseGroupTwo。但是，在单击事件带回 button2 后，当我单击 button2 时，collapseGroupTwo 不会展开。我是否需要在 collapseGroupTwo 上进一步切换折叠属性？

【问题讨论】：

能否贴出#button2的点击监听代码？

标签： javascript jquery html css

【解决方案1】：

您对按钮 2 的点击事件没有做任何事情来显示您的第二组...

$('#button2').click(function () {
    $('#span2').toggleClass("glyphicon-minus")

    //Add some code here to show the second group like so
    $('#collapseGroupTwo').toggleClass('collapse');
    //OR maybe just slide toggle instead? Depends how your css is with collapse class
    $('#collapseGroupTwo').stop(true, true).slideToggle(); 
})

【讨论】：