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>
        <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”内。

4

1 回答 1

0 
<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();;
        */
    });
});
于 2012-11-15T16:19:17.427 回答