Question

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

它有一个子div，在点击按钮后，它的高度有一个延迟的过渡。我已经尝试了悬停但是如何通过点击事件实现这一目标？

此外，在两个div完全高度之后，如何在父div之前将子div转换回来？

Answer 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>");
    });
});

单击其父级时转换子div

1 个答案:

JS Fiddle demo