Question

我正在开发的网站中有三个这样的列表：

    <ul class="sublist first_sublist_b">
        <li><a href="javascript:void(0)">Item Title 1</a></li>
        <li><a href="javascript:void(0)">Item Title 2</a></li>
        <li><a href="javascript:void(0)">Item Title 3</a></li>
        <li><a href="javascript:void(0)">Item Title 4</a></li>
        <li><a href="javascript:void(0)">Item Title 5</a></li>
        <li><a href="javascript:void(0)">Item Title 6</a></li>
        <li><a href="javascript:void(0)">Item Title 7</a></li>
        <li><a href="javascript:void(0)">Item Title 8</a></li>
        <li><a href="javascript:void(0)">Item Title 9</a></li>
        <li><a href="javascript:void(0)">Item Title 10</a></li>
        <li><a href="javascript:void(0)">Item Title 11</a></li>
        <li><a href="javascript:void(0)">Item Title 12</a></li>
        <li><a href="javascript:void(0)">Item Title 13</a></li>
        <li><a href="javascript:void(0)">Item Title 14</a></li>
        <li><a href="javascript:void(0)">Item Title 15</a></li>
    </ul>

每个“li”都会在这个隐藏的div中消失：

<div class="product_box">
    <h3>Item Title 1</h3>
    <p>Description</p>
</div>

问题在于我不知道最好的结构方式是什么，请记住这三个列表有15个项目，因此总共会有45个项目。我应该将每个项目div放在每个“li”中吗？我怎么能用jquery来解决这个问题？

编辑：product_box div将出现在列表下方，而不是在模态窗口或“li”内。

Answer 1

<ul class="sublist first_sublist_b">
    <li><a href="javascript:void(0)">Item Title 1</a></li>
    <li><a href="javascript:void(0)">Item Title 2</a></li>
    .....

</ul>

<div class="product_box_wrapper">
    <div class="product_box">Item description 1</div>
    <div class="product_box">Item description 2</div>
    ......
</div>

JavaScript的：

jQuery(function($) {
    $(".first_sublist_b a").on("click", function() {
        var index = $(this).parent().index(); // li index in ul;

        $(".product_box_wrapper .product_box").eq(index).fadeIn(500);
        /**
        * You can add fadeOut to the siblings:
        * .siblings().fadeOut();
        *
        * $(".product_box_wrapper .product_box").eq(index).fadeIn(500).siblings().fadeOut();;
        */
    });
});

组织大型列表结构和jquery到fadeIn项目

1 个答案: