0

对不起，如果你不明白我需要帮助很难说。

我基本上是在编写一个论坛系统，在我的论坛系统中，我希望管理员能够通过控制面板创建一个新类别，但是问题是在每个类别上我都希望有箭头可以向上滑动框但是如何我能否添加一段代码，自动创建一个独特的箭头和一段 JavaScript 编码，说“一旦单击箭头，将框向上滑动”

编辑：
jsfiddle.net/UxJkA当您单击第二个时，第一个会上升，我知道如何通过更改类手动修复该问题，但我希望它也自动更改每个箭头和框的类.

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>
4

1 回答 1

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 之后的框，或者将它们包装在一起或其他东西），但这是一个不同的问题。

于 2013-08-11T19:59:45.353 回答