父CSS(jQuery)

Question

有<dl>有padding-top

<dl id="posters" style="padding-top: 150px;">
<dt class="active">text</dt>
<dd class="active"><a href="#"><img width="150" height="150" src="..." /></a></dd>
<dt>text 2</dt>
<dd><a href="#"><img width="150" height="250" src="..." /></a></dd>
<dt>text 3</dt>
<dd><a href="#"><img width="150" height="350" src="..." /></a></dd>
</dl>

图像之间的区别 - height.

试图写一个脚本,它会改变height的<dl>,当<dd>点击时.

高度应取自该height属性 dd img.

试过这个,但没有运气:

$("#posters dt").click(function(){
        var parent_padding = $("dd").find("img").height();
        $("dd").closest("dl").css("padding-top",parent_padding);
    }).andSelf().addClass("active")});

谢谢.

Answer 1

我猜测a元素的默认行为是触发并重新加载页面.

家长应该仍然有效,因为事件发生在<dd>.

试试这个:

$("#posters dd").click(function(e){
    e.preventDefault();
    var parent_padding = $(this).find("img").attr("height");
    $(this).parent().css({"padding-top":parent_padding});
});

编辑:

查看您的代码,它与您发布的内容完全不同.

有几个问题.

我认为没有end()正确使用(不确定).

prev() 不应该接受函数作为参数.

在那之后放弃.

从提供的链接发布代码:

很明显,下面的代码示例不是解决方案.它是您正在使用的实际代码(基于您提供的链接).我没有采取任何措施来纠正它.我只是指出,如果你发布你在问题中使用的实际代码而不是修改版本,那将非常有用.事实证明,问题中的修改版本消除了错误.

$("dt").click(function(){
    $(this).siblings()
             .removeClass("active")
             .end()
        .prev(function(){
                    $("dd").parent()
                        .css({'padding-top':$(this).find('img').height()});
    }).andSelf().addClass("active")});
    $("#posters dt").fadeTo("fast",.7);$("#posters dt").hover(function(){$(this).fadeTo("fast",.9)},function(){$(this).fadeTo("fast",.7)});
                                                                         $("#posters .toggle a").click(function(){$(this).toggleClass('active');$("#posters dt").toggle();return false});
  }); 

将来,请发布您实际使用的代码.在这种情况下,您修改了错误.如果您发布了实际的事件处理程序,那么您可以立即获得解决方案.

部分解决方案:

这是解决方案的开始.

您在click事件处理程序内分配事件.这不对,所以我就把它们删除了.我现在认为这些是一个单独的问题.

这(据我所知)将使用填充做你想要的.请注意您的点击事件是在,dt而不是dd,因为这是您在代码中的方式.

如果事件应该在dd,则将其更改为#('posters dd').click(...并next()在下一行中删除.

$("#posters dt").click(function(){
    var padding = $(this).next().find('img').attr('height');
    $(this)
        .addClass('active')
        .siblings()
        .removeClass("active");
    $(this).parent()
        .css({'padding-top':padding});
}); ?

Answer 2

.attr('height')您可以随时使用jQuery函数,而不是获取图像.height().

除此之外,它应该适当调整你的填充顶部.

jsbin预览