Свернуть панель 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>