0

折りたたみ式パネル エクステンダーがあります。エクステンダーに問題はありません。ただし、パネルを開くリンクがあり、閉じるには折りたたむという別のリンクが必要です。1つのショーを1つの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>
4

2 に答える 2

2

これは、jQuery を使用すると非常に簡単に実行できます。パネルで cssclass を宣言し、「panel」と言い、ラベルで css クラスを宣言し、「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 ツールボックス コントロールも捨てることができます。もちろん、display: none;CSS で .panel を宣言する必要もあります。また、「次の」機能を効果的に使用するには、ラベルの周りのテーブルを削除する必要がある場合があることに注意してください。また、テキストを前後に変更するラベルが 1 つだけ必要です。

 <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>
于 2009-07-31T16:30:45.590 に答える
1

このページの例を使用して折りたたむことに成功しました: 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>
于 2009-07-31T17:11:35.230 に答える