Свернуть панель JavaScript проблемы с JavaScript

У меня есть складной удлинитель панели. У меня нет проблем с расширителем. Тем не менее, у меня есть ссылка, которая открывает панель, и я хочу, чтобы еще одна ссылка сказала свернуть, чтобы закрыть ее. Я хочу скрыть одну выставку одной стороной JavaScript. Проблема в том, что он работает только для первого ряда, но не для других, потому что я не получаю уникальный идентификатор или что-то еще. Я еще не нашел законного ответа. Я пробовал 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>
Источник

2 ответа

Это очень легко сделать с помощью jQuery. На вашей панели объявите класс csscale, скажем "панель", а на своем ярлыке объявите класс 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. Также обратите внимание, что вам может понадобиться избавиться от таблиц вокруг ярлыков, чтобы эффективно использовать функцию "следующий". Вам также понадобится только одна метка, которая будет изменять текст назад и вперед:

 <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 и помещаю их в отдельный файл, но для всех намерений и целей это работает (если вы используете файл jquery 1.3.2):

<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>
Источник

Я успешно справился с разрушением, используя пример с этой страницы: 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>
Источник
Другие вопросы по тегам