0

我在网格中有一系列“产品”div，每个都是可点击的。单击时，相应的“产品信息”DIV 会向下滑动以显示相应的产品信息。我有一些工作，但我有几个问题。

我怎样才能做到这一点，当一组信息显示，但另一个“产品”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's 回调：

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