Question

我正在经营一家网店，并希望稍微为产品列表增添趣味。我想要做的就是当用户点击该div中的某些文本时增加div的高度。

我的问题是div类在我的网站上存在多次（对于每个产品）。所以当我点击时，所有的div都在增加，而只是我想要的那个。

如果缺少详细信息或需要进一步/更好的解释，请告诉我。

这是我的代码。

非常感谢您对此进行调查丹尼尔

{foreach name=aussen item=module_data from=$product_listing}
    <script>
        $(document).ready(function() {
            $(".box-wide-more").click(function() {
                $(".box-wide").animate({
                    height: '300px'
                }, 500);
            });
        });     
    </script>

        <div class="box-wide">
            <p class="box-wide-more">Read more</p>
        </div>

{/foreach}

Answer 1

容易;）

            $(this).closest(".box-wide").animate({
                height: '300px'
            }, 500);

为什么要预先编写脚本？把它写在$（document）.ready（）;单独的js文件中的事件

Answer 2

不是使用类＆＃34; box-wide＆＃34;设置所有div的动画，而只动画点击对象父级

JSFiddle：http://jsfiddle.net/8j4n6/

$(".box-wide-more").click(function() {


    var $this = $( this ), // The object that has been clicked ( ".box-wide-more" )
        parent = $this.parent(); // The objects direct parent

    parent.animate({
        height: '300px'
    }, 500);

});

Answer 3

如果.box-wide-more有这么多父元素，那么为了得到一个特定的父元素（即.box-wide），你可以使用下面的代码。

  $(".box-wide-more").click(function() {    
    $(this).parents().find('.box-wide').animate({
        height: '300px'
    }, 500);
  });

带有多个div的jquery动画问题（同一个类）

3 个答案: