如何使用 jQuery 订阅引导按钮的 Click 事件来切换 DIV 的可见性？答案

【问题标题】：How do I subscribe to a bootstrapped button's Click event using jQuery to toggle a DIV's visibility?如何使用 jQuery 订阅引导按钮的 Click 事件来切换 DIV 的可见性？
【发布时间】：2017-10-11 04:51:11
【问题描述】：

我有两个按钮和两个 DIV。每次按下两个按钮（btnShowWithdrawals、btnHideWithdrawals）中的任何一个时，我都想切换两个 DIV（dvShowWithdrawals、dvHideWithdrawals）的可见性，但我需要您的帮助才能使其工作！

下面是我认为可以切换 DIV 可见性的代码。我认为这会使函数 e 和 f 订阅我的两个按钮的“点击”事件。这些按钮实际上是这些 DIV 的可见性切换器，但是当我单击这些按钮时，代码似乎没有被调用。

有趣的是，这两个按钮都已成功引导（使用 data-toggle="collapse" data-target="#dvMyStuff"）在第三个 DIV (dvMyStuff) 上执行类似手风琴的效果。这确实有效。

这是我尝试订阅按钮的点击事件的方式：

<script type="text/javascript">
    $('#btnShowWithdrawals').on('click',
        function(e) {

            $('#dvShowWithdrawals').toggle();
            $('#dvHideWithdrawals').toggle();

        });

    $('#btnHideWithdrawals').on('click',
        function(f) {

            $('#dvShowWithdrawals').toggle();
            $('#dvHideWithdrawals').toggle();

        });
</script>

这两个DIV实际上封装了上面我订阅的点击事件的两个按钮。以下是按钮本身：

<div id="dvShowWithdrawals" runat="server">
    <asp:LinkButton ID="btnShowWithdrawals" runat="server" Visible="True" data-toggle="collapse" data-target="#dvMyStuff">
        <i id="iShowWithdrawals" class="fa fa-plus-square-o" style="font-size: 40px;" title="Show my stuff"></i>
    </asp:LinkButton>
</div>    
<div id="dvHideWithdrawals" runat="server">
    <asp:LinkButton ID="btnHideWithdrawals" runat="server" Visible="True" data-toggle="collapse" data-target="#dvMyStuff">
        <i id="iHideWithdrawals" class="fa fa-minus-square-o" style="font-size: 40px;" title="Hide my stuff"></i>
    </asp:LinkButton>       
</div>

按钮确实成功地在第三个 DIV 上隐藏和显示我的东西，并带有手风琴卷起/下卷效果：

<div id="dvMyStuff" class="collapse"> 
    my stuff
</div>

问题在于按钮没有隐藏/显示封装它们的前两个 DIV。请帮忙！

【问题讨论】：

尝试将 jQuery 封装在 $(document).ready(function(){....}) 中。
我把它包起来了。没有什么。当我单击我的自定义 btnShowWithdrawals 按钮时，我的浏览器的开发人员工具仍然不会在我放置在这些函数中的任何断点处停止。他们似乎没有被调用。
没有$(document).ready( 是个问题，可能不是唯一的问题。将其保留，然后将ID 更改为小写，并在函数中取出e 和f。我认为这些都不是你真正的问题，但无论如何都应该这样做。
将按钮上的 ID 更改为小写。把你的 $(document).ready( 放在那里。取出函数中的 e 和 f 。我希望我有好消息！
用以下内容替换您的 javascript 代码段：$(document).ready(function() { $('#btnShowWithdrawals').on('click',function() { $('#dvShowWithdrawals').toggle(); $('#dvHideWithdrawals').toggle(); }); $('#btnHideWithdrawals').on('click', function() { $('#dvShowWithdrawals').toggle(); $('#dvHideWithdrawals').toggle(); }); console.log('loaded!!!'); }); 清除缓存并重新加载页面。确保在控制台中看到 loaded!!!。那就试试吧。页面有错误吗？

标签： jquery asp.net bootstrap-4

【解决方案1】：

这就是最终奏效的方法。我想部分归功于 nurdyguy，因为他建议我将所有内容都包装在 $(document).ready 块周围。我还要感谢 J.R.，另一个和我一起集思广益的朋友。首先，我们更改了用于在事件处理函数中隐藏/显示 DIV 的方法：

<script type="text/javascript">

    $(document).ready(function () {

        $('#btnShowWithdrawals').on('click',
            function () {
                $('#dvShowWithdrawals').hide();
                $('#dvHideWithdrawals').show();
            });

        $('#btnHideWithdrawals').on('click',
            function () {
                $('#dvShowWithdrawals').show();
                $('#dvHideWithdrawals').hide();
            });
    });

</script>

然后，我们对 DIV 本身进行了一项更改。我们添加了属性 style="display: none;"仅适用于 dvHideWithdrawals：

<div id="dvShowWithdrawals" runat="server">
    <asp:LinkButton ID="btnShowWithdrawals" runat="server" Visible="True" data-toggle="collapse" data-target="#dvMyStuff">
        <i id="iShowWithdrawals" class="fa fa-plus-square-o" style="font-size: 40px;" title="Show my stuff"></i>
    </asp:LinkButton>
</div>    
<div id="dvHideWithdrawals" runat="server" style="display: none;">
    <asp:LinkButton ID="btnHideWithdrawals" runat="server" Visible="True" data-toggle="collapse" data-target="#dvMyStuff">
        <i id="iHideWithdrawals" class="fa fa-minus-square-o" style="font-size: 40px;" title="Hide my stuff"></i>
    </asp:LinkButton>       
</div>

另外，我们做的一些新的事情是在标记文件顶部的页面指令上设置 ClientIDMode="Static"：

<%@ Control Language="c#" AutoEventWireup="True" ClientIDMode="Static" CodeBehind="WeDidIt.ascx.cs" Inherits="WeDidIt" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>

瞧！我的前两个 DIV 现在按应有的方式隐藏/显示，而我的第三个 DIV 继续像手风琴一样向上/向下滚动（受引导程序影响）。

【讨论】：