Jquery：我怎样才能使一个数字元素可折叠？

How can I make a figure element collapsible, without adding an extra button?

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

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

By default, I would like to place a button to open the image at this point. Can this button be generated automatically?

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

2 个解决方案

#1

You can use the slideToggle() function assuming you have jQuery included (HIGHLY RECOMMEND).

假设你包含了jQuery(HIGHLY RECOMMEND),你可以使用slideToggle()函数。

Then you can simply do:

然后你可以简单地做:

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

You will need to of course add a button. You could append one with jQUery (automatically) or you can edit the HTML to get it there.

您当然需要添加一个按钮。您可以使用jquery(自动)附加一个,或者您可以编辑HTML以获取它。

Here is the HTML way

这是HTML方式

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

Here is the jQuery way (untested)

这是jQuery方式(未经测试)

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

Best of Luck to You! (again this is all untested)

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

Come to think of it you probably want after() instead of append() because your button will disappear after you toggle once. Use this

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

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

Link to jQuery slideToggle: http://api.jquery.com/slidetoggle/

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

#2

Check out this simple code snippet to toggle image using figure element itself

查看这个简单的代码片段,使用图元素本身来切换图像

$('#accordian_img').click(function () {
    $('.img-toggle').toggleClass("show"); // toggle show class to image element
});

/* Image style to show and hide */
.img-toggle.show {
  display:block;
}
.img-toggle {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<figure id="accordian_img" style="width:400px;cursor:pointer">
  Click To Toggle Image 
  <img class="img-toggle" src="http://placehold.it/400x150">
</figure>

#1