很抱歉,如果您不太了解我需要帮助的话,很难说。
我基本上编写了一个论坛系统,在我的论坛系统中,我希望管理员能够通过控制面板创建一个新的类别,但问题是每个类别我想要有箭头滑动框但我怎么能添加一段代码,自动创建一个独特的箭头和一段JavaScript编码说“一旦点击箭头,就将框滑动到其中”'
编辑:
jsfiddle.net/UxJkA当您点击第二个时,第一个上升,我知道如何通过更改类来手动修复它,但我希望它也会自动更改每个类的箭头和框的类。< / p>
Javascript代码
$(document).ready(function(){
$("#a_main_content").show();
$('.arrow').click(function () {
$("#a_main_content").slideToggle();
});
$("#p_main_content").show();
$('.p_arrow').click(function () {
$("#p_main_content").slideToggle();
});
});
HTML代码
<div id="bottom_corners"></div>
<!-- Main content box -->
<!-- Category 1 -->
<div id="p_content_header">
Category
<img src="images/arrow.png" class="p_arrow">
</div>
<div id="p_main_content">
<table>
<tr>
<td class="forum_name_header" style="width:240px;">Forum Name</td>
<td class="forum_name_header" style="width: 300px;">Last Post</td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James first forum<br />
<i style="color: #a3a3a3;">Topics: 858, Messages: 8,485</i></td>
<td style="width: 300px;" class="forum_name">Test 1<br />
by <b style="color: red;">Admin</b></td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James second forum<br />
<i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td>
<td style="width: 300px;" class="forum_name">Test 2<br />
by <b style="color: blue;">Mod</b></td>
</tr>
</table>
</div>
<div id="bottom_corners"></div>
<!-- Category 1 -->
<!-- Category 2 -->
<div id="p_content_header">
Category 2
<img src="images/arrow.png" class="p_arrow">
</div>
<div id="p_main_content">
<table>
<tr>
<td class="forum_name_header" style="width:240px;">Forum Name</td>
<td class="forum_name_header" style="width: 300px;">Last Post</td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James first forum<br />
<i style="color: #a3a3a3;">Topics: 858, Messages: 8,485</i></td>
<td style="width: 300px;" class="forum_name">Test 3<br />
by <b style="color: green;">Donator</b></td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James second forum<br />
<i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td>
<td style="width: 300px;" class="forum_name">Test 4<br />
by <b style="color: grey;">Registerd User</b></td>
</tr>
<tr>
<td style="width:240px;" class="forum_name">James second forum<br />
<i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td>
<td style="width: 300px;" class="forum_name">Test 5<br />
by <b style="color: #333;"><strike>Banned user</strike></b></td>
</tr>
</table>
答案 0 :(得分:1)
......我不确定我理解你的问题,但这是我最好的猜测:http://jsfiddle.net/BXzKC/
<div id="p_content_header">Category
<img src="images/arrow.png" class="arrow" data-content="first" />
</div>
<div class="content-container" data-content="first">
<table> ... </table>
</div>
<div id="p_content_header">Category 2
<img src="images/arrow.png" class="arrow" data-content="second" />
</div>
<div class="content-container" data-content="second">
<table> ... </table>
</div>
所以现在每个“盒子”都有一个共同的类加上一些数据属性来识别它。 每个箭头也有一个共同的类和相同的数据属性。
$(".content-container").show();
$('.arrow').click(function (e) {
var cat = $(e.currentTarget).data('content');
$('.content-container[data-content="' + cat + '"]').slideToggle();
});
所以基本上我们在第一行同时显示所有“盒子”;然后,点击任意箭头,我们读取数据并使用它来识别要展开/折叠的框。
你仍然需要自己为这些数据提供一些值(盒子的名称?一个简单的计数?你也可以忽略所有这些,只需抓住包含箭头的div后面的方框,或者将它们包装在一起或其他东西),但这是一个不同的问题。