折叠面板 JavaScript 问题

发布于 2024-07-30 00:49:56 字数 2002 浏览 9 评论 0原文

我有一个可折叠面板扩展器。我对扩展器没有任何问题。但是，我有一个打开面板的链接，我想要另一个链接说折叠以关闭它。我想隐藏一个显示一个javascript端。问题是它只适用于第一行，但不适用于其他行，因为我没有获得唯一的 ID 或其他东西。我还没有找到合法的答案。我尝试过通过获取父元素来使用jquery，但没有成功。我能做些什么？

答案：

<asp:TemplateField HeaderText="Lng Descr" SortExpression="LongDescription">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("LongDescription") %>' TextMode ="MultiLine" Rows="5" ></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>     
                <table>                  
                    <tr id="expand" style="display:">   
                        <td>    
                            <asp:Label ID="Label3" runat="server" ForeColor="Blue"><u></u></asp:Label>
                        </td>
                    </tr>
                </table>
                <asp:Panel ID="Panel1" runat="server" >
                    <table>
                    <tr>
                    <td>
                        <%#Eval("LongDescription")%>
                    </td>
                    </tr>
                    </table>
                </asp:Panel>
                <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
                 TargetControlID = "Panel1"
                 CollapsedSize="0"
                ExpandedSize="50"
                Collapsed="true" 
                ExpandControlID="Label3"
                CollapseControlID="Label3"
                AutoCollapse="false" 
                Scrollcontents="false" 
                collapsedText="<u>Expand"
                ExpandDirection="Vertical"
                ExpandedText = "<u>Collapse"
                TextLabelID="Label3" />
                </ItemTemplate>
            </asp:TemplateField>

原文

I have a collapsible panel extender. I have no issues with the extender. however, I have a link that opens the panel and I want another link saying collapse to close it. I want to hide one show one javascript side. The issue is that it only works for the first row but not the others because I am not getting the unique ID or something. I haven't found a legitimate answer yet. I've tried jquery by getting parent elements and I was unsuccessful. What can I do?

Answer:

<asp:TemplateField HeaderText="Lng Descr" SortExpression="LongDescription">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("LongDescription") %>' TextMode ="MultiLine" Rows="5" ></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>     
                <table>                  
                    <tr id="expand" style="display:">   
                        <td>    
                            <asp:Label ID="Label3" runat="server" ForeColor="Blue"><u></u></asp:Label>
                        </td>
                    </tr>
                </table>
                <asp:Panel ID="Panel1" runat="server" >
                    <table>
                    <tr>
                    <td>
                        <%#Eval("LongDescription")%>
                    </td>
                    </tr>
                    </table>
                </asp:Panel>
                <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
                 TargetControlID = "Panel1"
                 CollapsedSize="0"
                ExpandedSize="50"
                Collapsed="true" 
                ExpandControlID="Label3"
                CollapseControlID="Label3"
                AutoCollapse="false" 
                Scrollcontents="false" 
                collapsedText="<u>Expand"
                ExpandDirection="Vertical"
                ExpandedText = "<u>Collapse"
                TextLabelID="Label3" />
                </ItemTemplate>
            </asp:TemplateField>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

守望孤独 2024-08-06 00:49:56

使用 jQuery 可以轻松完成此操作。在您的面板中，声明一个 cssclass，例如“panel”，并在标签上声明一个 css class，例如“toggle”。您的 jQuery 将是：

$(document).ready(function(){
    $(".toggle").toggle(function (){
        $(this).text("Collapse");
        $(this).next(".panel").slideDown("fast");
    },function () {
        $(this).text("Expand");
        $(this).next(".panel").slideUp("fast");
    });
});

您也可以放弃 ajax 工具箱控件。当然，您还必须在 CSS 中将 .panel 声明为 display: none;。另请注意，您可能必须删除标签周围的表格才能有效地使用“下一个”功能。您还只需要一个标签来来回更改其文本：

 <asp:LinkButton ID="view" runat="server" text="Expand" cssclass="toggle"> 
 <!-- You may alternatively use a standard link here or even a <p> tag, like this
 <p class="toggle">Expand</p>
 -->
 <asp:Panel ID="Panel1" runat="server" cssclass="panel">
       <table>
                <tr>
                <td>
                    <%#Eval("LongDescription")%>
                </td>
                </tr>
       </table>
 </asp:Panel>

编辑

这是我用来为您运行此程序的确切代码。请注意，我通常会将脚本和 CSS 取出并将它们放入单独的文件中，但出于所有意图和目的，这是可行的（如果您使用的是 1.3.2 jquery 文件）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
    .panel    {
        display: none;
    }
</style>

<script type="text/javascript">
$(document).ready(function() {
    $(".toggle").toggle(function() {
        $(this).text("Collapse");
        $(this).next(".panel").slideDown("fast");
    }, function() {
        $(this).text("Expand");
        $(this).next(".panel").slideUp("fast");
    });
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <p class="toggle" style="cursor:pointer;color:blue"><u>Expand</u></p>
    <asp:Panel ID="Panel1" runat="server" CssClass="panel" >
        <table>
        <tr>
        <td>
            <p>some text</p>
        </td>
        </tr>
        </table>
    </asp:Panel>               
    </form>
</body>
</html>

This is very easily done with jQuery. In your panel, declare a cssclass, say "panel", and on your label declare a css class, say "toggle". Your jQuery would be:

$(document).ready(function(){
    $(".toggle").toggle(function (){
        $(this).text("Collapse");
        $(this).next(".panel").slideDown("fast");
    },function () {
        $(this).text("Expand");
        $(this).next(".panel").slideUp("fast");
    });
});

You can ditch the ajax toolbox control, too. Of course, you also must declare .panel to display: none; in your CSS. Also note, you may have to get rid of your tables around your labels for this to effectively use the "next" function. You also only need one label that will change its text back and forth:

 <asp:LinkButton ID="view" runat="server" text="Expand" cssclass="toggle"> 
 <!-- You may alternatively use a standard link here or even a <p> tag, like this
 <p class="toggle">Expand</p>
 -->
 <asp:Panel ID="Panel1" runat="server" cssclass="panel">
       <table>
                <tr>
                <td>
                    <%#Eval("LongDescription")%>
                </td>
                </tr>
       </table>
 </asp:Panel>

EDIT

Here's the exact code I used to get this running for you. Note that I would normally pull the script and CSS out and put them in a separate file, but for all intents and purposes, this works (if you are using the 1.3.2 jquery file):

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
    .panel    {
        display: none;
    }
</style>

<script type="text/javascript">
$(document).ready(function() {
    $(".toggle").toggle(function() {
        $(this).text("Collapse");
        $(this).next(".panel").slideDown("fast");
    }, function() {
        $(this).text("Expand");
        $(this).next(".panel").slideUp("fast");
    });
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <p class="toggle" style="cursor:pointer;color:blue"><u>Expand</u></p>
    <asp:Panel ID="Panel1" runat="server" CssClass="panel" >
        <table>
        <tr>
        <td>
            <p>some text</p>
        </td>
        </tr>
        </table>
    </asp:Panel>               
    </form>
</body>
</html>

回复收藏 0 原文

破晓 2024-08-06 00:49:56

我使用此页面中的示例成功折叠了：
http://roshanbh.com.np/2008/ 03/expandable-collapsible-toggle-pane-jquery.html

我只使用

.msg_head {
    cursor: pointer;
}

CSS。

这是我的脚本中的内容。

<script type="text/javascript" id="js">
  $(document).ready(function() {

      //toggle the componenet with class msg_body
      $(".msg_head").click(function() {
         $(this).next(".msg_body").slideToggle(600);
      });
  });
</script>

<h2 class="msg_head">Subject<h2>

<div class="msg_body">
    Blah blah blah.
</div>

I had success with collapsing using the example from this page:
http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html

I just use

.msg_head {
    cursor: pointer;
}

For the CSS.

And here is what is in my script.

<script type="text/javascript" id="js">
  $(document).ready(function() {

      //toggle the componenet with class msg_body
      $(".msg_head").click(function() {
         $(this).next(".msg_body").slideToggle(600);
      });
  });
</script>

<h2 class="msg_head">Subject<h2>

<div class="msg_body">
    Blah blah blah.
</div>

回复收藏 0 原文

~没有更多了~