javascript - 组织大列表结构和 jquery 以淡入元素

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 个元素。我应该将每个 item 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();;
        */
    });
});