Question

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

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

有趣的是，这两个按钮已经成功引导（使用数据切换=＆＃34;折叠＆＃34;数据目标=＆＃34;＃dvMyStuff＆＃34;）来执行手风琴 - 喜欢对第三个DIV（dvMyStuff）的影响。这确实有效。

以下是我尝试订阅按钮的方法＆＃39;点击活动：

<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。求救！

Answer 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 =＆＃34; display：none;＆＃34;只有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 =＆＃34; Static＆＃34;在标记文件顶部的页面指令上：

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

瞧！我的前两个DIV现在正在隐藏/显示它们应该，并且我的第三个DIV继续像手风琴一样上下滚动（由引导程序影响）。

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

1 个答案: