div显示隐藏转换问题

jsdiv显示隐藏html

解决方案 »

  1.   

    不太明白”多次点击就会一直多次显示隐藏“
    如果修改JS只让它只在显示隐藏之间转换，那可以hide()/show()方法切换显示隐藏
      

  2.   

    用jquery 动画a.click(function(){
        $("div").stop(true);
        $("div").animate({opacity:'toggle'},1000);
    })
      

  3.   

    这个是为了控制ul的显示的  也就是样式为.toggle的隐藏显示的
      

  4.   


    a.toggle(function(){
    $("#divId").show()
    },function(){
    $("#divId").hide()
    });
      

  5.   

    这个....我的是通过两个repeater嵌套循环出来的 LinkButton 和  RadioButton，从数据库取得值，通过点击LinkButton 实现其下面绑定的RadioButton的显示和隐藏
    如图，
    点击班内表现
    点击学习状态也一样
      

  6.   

    这个....我的是通过两个repeater嵌套循环出来的 LinkButton 和  RadioButton，从数据库取得值，通过点击LinkButton 实现其下面绑定的RadioButton的显示和隐藏
    如图，
    点击班内表现后：
    点击学习状态也一样
      

  7.   

    这个....我的是通过两个repeater嵌套循环出来的 LinkButton 和  RadioButton，从数据库取得值，通过点击LinkButton 实现其下面绑定的RadioButton的显示和隐藏
    如图，
    点击班内表现后：
    点击学习状态也一样
    就是div显示隐藏而已
    贴下前台html代码
      

  8.   

    这个....我的是通过两个repeater嵌套循环出来的 LinkButton 和  RadioButton，从数据库取得值，通过点击LinkButton 实现其下面绑定的RadioButton的显示和隐藏
    如图，
    点击班内表现后：
    点击学习状态也一样
    就是div显示隐藏而已
    贴下前台html代码
    这两天没有时间上网，不好意思，这是前台代码
    <div id="HZZD" style="border-top:1px solid gray; margin-top:5px;" >
                                                <div class="aa">
                                                <a id="rptHZZDparent_lbtnParent_0" class="abc" href="javascript:__doPostBack(&#39;rptHZZDparent$ctl00$lbtnParent&#39;,&#39;&#39;)" style="font-size:10pt;font-weight:bold;">班内表现</a>
                                                <ul class="toggle">
                                                
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_0_rbtn_0" type="radio" name="rptHZZDparent$ctl00$rptHZZDsubclass$ctl00$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl00$rptHZZDsubclass$ctl00$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_0_rbtn_0">平时间积极认真，专心听讲。作业积极完成。</label></span>
                                                    
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_0_rbtn_1" type="radio" name="rptHZZDparent$ctl00$rptHZZDsubclass$ctl01$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl00$rptHZZDsubclass$ctl01$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_0_rbtn_1">平时积极向</label></span>
                                                    
                                                </ul>
                                                </div>
                                                
                                            </div>
                                          
                                            <div id="HZZD" style="border-top:1px solid gray; margin-top:5px;" >
                                                <div class="aa">
                                                <a id="rptHZZDparent_lbtnParent_1" class="abc" href="javascript:__doPostBack(&#39;rptHZZDparent$ctl01$lbtnParent&#39;,&#39;&#39;)" style="font-size:10pt;font-weight:bold;">学习状态</a>
                                                <ul class="toggle">
                                                
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_1_rbtn_0" type="radio" name="rptHZZDparent$ctl01$rptHZZDsubclass$ctl00$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl01$rptHZZDsubclass$ctl00$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_1_rbtn_0">学习认真，作业完成很好。听课专心，笔记记录认真。</label></span>
                                                    
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_1_rbtn_1" type="radio" name="rptHZZDparent$ctl01$rptHZZDsubclass$ctl01$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl01$rptHZZDsubclass$ctl01$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_1_rbtn_1">上课专注力很好。最</label></span>
                                                    
                                                </ul>
                                                </div>
                                                
                                            </div>
                                          
                                            <div id="HZZD" style="border-top:1px solid gray; margin-top:5px;" >
                                                <div class="aa">
                                                <a id="rptHZZDparent_lbtnParent_2" class="abc" href="javascript:__doPostBack(&#39;rptHZZDparent$ctl02$lbtnParent&#39;,&#39;&#39;)" style="font-size:10pt;font-weight:bold;">班外表现</a>
                                                <ul class="toggle">
                                                
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_2_rbtn_0" type="radio" name="rptHZZDparent$ctl02$rptHZZDsubclass$ctl00$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl02$rptHZZDsubclass$ctl00$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_2_rbtn_0">性格活泼</label></span>
                                                    
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_2_rbtn_1" type="radio" name="rptHZZDparent$ctl02$rptHZZDsubclass$ctl01$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl02$rptHZZDsubclass$ctl01$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_2_rbtn_1">劳动光荣</label></span>
                                                    
                                                </ul>
                                                </div>
                                                
                                            </div>
    数据库了不只是这三个，因为没怎么用过JS和jQuery，所以...不会弄，简单的还行
      

  9.   

    $('a.abc').click(function(){$(this).next().stop(true).animate({opacity:'toggle'},1000);})
      

  10.   

    麻烦您了，还是不行
    <style type="text/css">
        .toggle
        {
            display:none;
        }
        </style>
        <script src="../js/jquery-2.0.3.js"></script>
        <%--<script type="text/javascript">
            $(document).ready(function () {
                $('.aa').on('click', '.abc', function (event) {
                    event.preventDefault();
                    $(this).closest('.aa').find('.toggle').slideToggle();
                });
            });
         </script>--%>     <script type="text/javascript">
             $(document).ready(function () {
                 $('.abc').click(function () { $(this).next().stop(true).animate({ opacity: 'toggle' }, 1000); })
             });
         </script>如果您觉得麻烦的话，就不用弄了，给我说一声我结贴，谢谢啊
      

  11.   

    看楼主想要的效果，感觉没那么复杂，是楼主想复杂了吗？简单说一下思路：
    1、这种页面排版的话，建议使用<ul><li>...</li><li>...</li></ul>这样的格式。
    2、把从数据库取出来的数据放到<li>...</li>中。
    3、对<ul>下的所有<li>加click事件，控制隐藏和显示。PS:不知道有没有理解楼主的意思（建议：最好标签ID不要重复）。
      

  12.   

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <div id="HZZD" style="border-top:1px solid gray; margin-top:5px;" >
                                                <div class="aa">
                                                <a id="rptHZZDparent_lbtnParent_0" class="abc" href="javascript:__doPostBack(&#39;rptHZZDparent$ctl00$lbtnParent&#39;,&#39;&#39;)" style="font-size:10pt;font-weight:bold;">班内表现</a>
                                                <ul class="toggle">
                                                 
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_0_rbtn_0" type="radio" name="rptHZZDparent$ctl00$rptHZZDsubclass$ctl00$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl00$rptHZZDsubclass$ctl00$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_0_rbtn_0">平时间积极认真，专心听讲。作业积极完成。</label></span>
                                                     
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_0_rbtn_1" type="radio" name="rptHZZDparent$ctl00$rptHZZDsubclass$ctl01$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl00$rptHZZDsubclass$ctl01$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_0_rbtn_1">平时积极向</label></span>
                                                     
                                                </ul>
                                                </div>
                                                 
                                            </div>
                                           
                                            <div id="HZZD" style="border-top:1px solid gray; margin-top:5px;" >
                                                <div class="aa">
                                                <a id="rptHZZDparent_lbtnParent_1" class="abc" href="javascript:__doPostBack(&#39;rptHZZDparent$ctl01$lbtnParent&#39;,&#39;&#39;)" style="font-size:10pt;font-weight:bold;">学习状态</a>
                                                <ul class="toggle">
                                                 
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_1_rbtn_0" type="radio" name="rptHZZDparent$ctl01$rptHZZDsubclass$ctl00$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl01$rptHZZDsubclass$ctl00$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_1_rbtn_0">学习认真，作业完成很好。听课专心，笔记记录认真。</label></span>
                                                     
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_1_rbtn_1" type="radio" name="rptHZZDparent$ctl01$rptHZZDsubclass$ctl01$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl01$rptHZZDsubclass$ctl01$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_1_rbtn_1">上课专注力很好。最</label></span>
                                                     
                                                </ul>
                                                </div>
                                                 
                                            </div>
                                           
                                            <div id="HZZD" style="border-top:1px solid gray; margin-top:5px;" >
                                                <div class="aa">
                                                <a id="rptHZZDparent_lbtnParent_2" class="abc" href="javascript:__doPostBack(&#39;rptHZZDparent$ctl02$lbtnParent&#39;,&#39;&#39;)" style="font-size:10pt;font-weight:bold;">班外表现</a>
                                                <ul class="toggle">
                                                 
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_2_rbtn_0" type="radio" name="rptHZZDparent$ctl02$rptHZZDsubclass$ctl00$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl02$rptHZZDsubclass$ctl00$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_2_rbtn_0">性格活泼</label></span>
                                                     
                                                        <span class="HZZD"><input id="rptHZZDparent_rptHZZDsubclass_2_rbtn_1" type="radio" name="rptHZZDparent$ctl02$rptHZZDsubclass$ctl01$aaa" value="rbtn" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;rptHZZDparent$ctl02$rptHZZDsubclass$ctl01$rbtn\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="rptHZZDparent_rptHZZDsubclass_2_rbtn_1">劳动光荣</label></span>
                                                     
                                                </ul>
                                                </div>
                                                 
                                            </div>
      <script>$('a.abc').click(function(){$(this).next().stop(true).animate({opacity:'toggle'},1000);})</script>
    </body>
    </html>
    这样不行吗？
      

  13.   

    不行，一到页面就不可以了
    这是我的源码
    前台<span style=" font-size:14px; font-weight:bold; height:24px; vertical-align:top">会诊内容(供选择,可修改):</span>
                                      
                                      <asp:Repeater ID="rptHZZDparent" runat="server" 
                                          onitemdatabound="rptHZZDparent_ItemDataBound" >
                                          <ItemTemplate>
                                            <div id="HZZD" style="border-top:1px solid gray; margin-top:5px;" >
                                                <div class="aa">
                                                <asp:LinkButton ID="lbtnParent" runat="server" 
                                                 CommandArgument='<%#Eval("Id")%>' Font-Size="10pt" CssClass="abc" Font-Bold="True"><%#Eval("Contents")%></asp:LinkButton>
                                                <ul class="toggle">
                                                <asp:Repeater ID="rptHZZDsubclass" runat="server">
                                                    <ItemTemplate>
                                                        <asp:RadioButton ID="rbtn" class="HZZD" runat="server" Text='<%#Eval("Contents")%>' 
                                                        AutoPostBack="True" GroupName="aaa" oncheckedchanged="rbtn_CheckedChanged" />
                                                    </ItemTemplate>
                                                </asp:Repeater>
                                                </ul>
                                                </div>
                                                
                                            </div>
                                          </ItemTemplate>
                                      </asp:Repeater>
                                      
                                      <script> $('a.abc').click(function () { $(this).next().stop(true).animate({ opacity: 'toggle' }, 1000); })</script>
                                      <asp:Label ID="lblHZZD" runat="server" Text="Label" ForeColor="Red"></asp:Label>
    后台private void GetHZZD()
            {
                IList<SFHZDictionary> SFHZ = SFHZDictionaryManager.GetSFHZDictionary_parents();
                if (SFHZ.Count>0)
                {
                    lblHZZD.Visible = false;
                    rptHZZDparent.Visible = true;
                    rptHZZDparent.DataSource = SFHZ;
                    rptHZZDparent.DataBind();
                }
                else
                {
                    lblHZZD.Visible = true;
                    rptHZZDparent.Visible = false;
                    lblHZZD.Text = "没有可供选择的会诊内容！";
                }
            }protected void rptHZZDparent_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
                {
                    Repeater rep = e.Item.FindControl("rptHZZDsubclass") as Repeater;//找到里层的repeater对象
                    LinkButton lbtn = e.Item.FindControl("lbtnParent") as LinkButton;
                    int parentsid = Convert.ToInt32(lbtn.CommandArgument.ToString());
                    rep.DataSource = SFHZDictionaryManager.GetSFHZDictionaryByParentsId(parentsid);
                    rep.DataBind();
                }
            }因为是新手，代码命名写的不规范