Question

我正在使用Soh Tanaka的剧本以手风琴风格切换打开和关闭的div内容。

<script language="javascript" type="text/javascript">
            $(document).ready(function(){

                //Hide (Collapse) the toggle containers on load
                $(".toggle_container").hide(); 

                //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
                $("h3.trigger").click(function(){
                    $(this).toggleClass("active").next().slideToggle("slow");

                    return false; //Prevent the browser jump to the link anchor
                });

            });
</script>

我正在尝试调整此脚本，以便切换还会将容量div的高度增加50px，其id为#join_find_talk。请帮助......

您可以在此处看到它：http://www.snakeandherring.com.au/join/

Answer 1

您不应使用Javascript按定义的数量增加元素的高度。这就是CSS的用途。

然而，Javascript可以帮助您做的是动态部分。因此，不是更改元素的高度，而是向其中添加一个类。这样您就可以在以后更改大小，而无需编辑Javascript。

一个例子：

<style type="text/css">
  #join_find_talk { height: 100px; }
  #join_find_talk.expanded { height: 150px; }
</style>

<script type="text/javascript">
  $("h3.trigger").click(function(e) {
    e.preventDefault(); // Use this, not return false;
    $("#join_find_talk").toggleClass("expanded");
  });
</script>

请注意，Javascript中不会显示高度/宽度信息。这是风格与逻辑的分离。这是一件好事：）

调整jQuery脚本以向父元素添加高度

1 个答案: