Question

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

如何制作，以便在显示一组信息时，单击另一个“product”div，当前信息将滑入隐藏状态，产品信息将被切换，然后显示新信息。有意义吗？

如果以下代码没有意义，则直接链接为here

这是隐藏信息的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>

想法？

Answer 1

使用slideToggle的回调：

$(".selected_show").slideToggle(1000, function(){
    $('.product_info').hide();
});

需要DIV显示/隐藏切换发生在SlideToggle发生后

1 个答案: