Question

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

＆＃13;

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

＆＃13;

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

Answer 1

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

然后你就可以做到：

$( "#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/

Answer 2

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

$('#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>

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

2 个答案: