0

グリッドに一連の「製品」div があり、それぞれがクリック可能です。いずれかをクリックすると、対応する「製品情報」DIV が下にスライドして、対応する製品情報が表示されます。ある程度は機能していますが、いくつかの問題があります。

1セットの情報が表示されているときに別の「製品」divをクリックすると、現在の情報が非表示の状態になり、製品情報が切り替わり、新しい情報が表示されるようにするにはどうすればよいですか. わかる？

以下のコードが意味をなさない場合、直接リンクはこちら

これは非表示情報の HTML です。クラス「selected_show」は、「display:none;」でスタイル設定されています。始めること：

<section>
        <div class=selected_show>
            <div>
                <div class="product_info grassone piece_info">
                    <img src="./images/detail_info/astronomical.jpg">
                    <div>
                        <p>Short description of the piece...</p>
                    </div>
                </div>
            </div>

            <div>
                <div class="product_info competitive piece_info">
                    <img src="./images/detail_info/astronomical.jpg">
                    <div style="background:red;">
                        <p>Short description of the piece...</p>
                    </div>
                </div>
            </div>

            <div>
                <div class="product_info magpie piece_info">
                    <img src="./images/detail_info/astronomical.jpg">
                    <div style="background:blue;">
                        <p>Short description of the piece...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

ここで情報が選択されます。

<section>
        <div class="piece woodcut">
        <a href="grassone" class="showinfo"><p>GRASSONE</p></a>
        </div>

        <div class="piece woodcut">
        <a href="competitive" class="showinfo"><p>COMPETITIVE</p></a>
        </div>

        <div class="piece woodcut">
        <a href="magpie" class="showinfo"><p>MAGPIE</p></a>
        </div>

</section>

これは、効果のスクリプトです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
    <script type="text/javascript">

    $('a.showinfo').click(function(e){
    e.preventDefault();
            $("html, body").animate({ scrollTop: 100 }, "slow");        
        $(".selected_show").slideToggle();

    var a_href = '.'+ $(this).attr('href');
        $('.product_info').hide();
        $(a_href).show();
    });

    </script>

アイデア？

4

1 に答える 1

0

slideToggleのコールバックを使用します。

$(".selected_show").slideToggle(1000, function(){
    $('.product_info').hide();
});
于 2012-08-06T23:20:35.567 に答える