javascript - Jquery:如何使图形元素可折叠？

Question

如何在不添加额外按钮的情况下使图形元素可折叠？

<figure><img src="abc.png"></figure>

默认情况下，我想在此时放置一个按钮来打开图像。这个按钮可以自动生成吗？

Answer 1

假设您已包含 jQuery(强烈推荐)，您可以使用 slideToggle() 函数。

然后你可以简单地做:

$( "#myButton" ).click(function() {
  $( "figure" ).slideToggle( "slow" );
});

您当然需要添加一个按钮。您可以使用 jQUery(自动)附加一个，或者您可以编辑 HTML 以将其添加到那里。

这是HTML方式

<button id="myButton">Click Me</button>

这是 jQuery 方式(未经测试)

$('figure').append("<button id='myButton'>Click Me</button>");

祝你好运! (同样，这都是未经测试的)

想想看，您可能需要 after() 而不是 append()因为你的按钮会在你切换一次后消失。用这个

$('figure').after("<button id='myButton'>Click Me</button>");

jQuery slideToggle 链接:http://api.jquery.com/slidetoggle/