单击其父级时转换子级div答案

【问题标题】：Transitioning child div when its parent is clicked单击其父级时转换子级div
【发布时间】：2014-10-02 13:36:32
【问题描述】：

我希望有一个 div 设置为在单击其中的按钮时设置为高度转换，并在再次单击按钮时设置为向下转换。

它有一个子 div，在单击按钮后高度延迟转换。我已经尝试过悬停，但是如何通过点击事件来实现呢？

另外，在两个 div 都达到全高后，如何让子 div 在父 div 之前向下过渡？

【问题讨论】：

你有任何代码可以证明你尝试过这个吗？

标签： html parent transition

【解决方案1】：

如果您可以使用:hover 来实现，并且希望通过点击事件来实现，请使用选择器:active - 它是点击事件的正确 CSS 选择器。

如果您希望它根据按钮单击更改操作，您可能必须使用 javascript，因为我不知道使用纯 css 执行此操作的任何方法。我已将代码包含在我为您找到并修改的小提琴中。

JS Fiddle demo

$(document).ready(function() {

var $dscr = $('.description'),
    $switch = $('.toggle-link'),
    $initHeight = 40; // Initial height

$dscr.each(function() {
    $.data(this, "realHeight", $(this).height());    // Create new property realHeight
    }).css({ overflow: "hidden", height: $initHeight + 'px' });

$switch.toggle(function() {
      $dscr.animate({ height: $dscr.data("realHeight") }, 600);
      $switch.html("<button>-</button>");

    }, function() {
        $dscr.animate({ height: $initHeight}, 600);
        $switch.html("<button>+</button>");
    });
});

【讨论】：