1

私が開発しているサイトには、このような3つのリストがあります。

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

問題は、3つのリストに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 に答える