jquery:我怎样才能让一个数字元素可折叠?
如何在不添加额外按钮的情况下制作可折叠的图形元素?jquery:我怎样才能让一个数字元素可折叠?
<figure><img src="abc.png"></figure>
默认情况下,我想放置一个按钮,此时打开图像。该按钮是否可以自动生成?
你可以使用slideToggle()
函数假设你有jQuery(HIGHLY RECOMMEND)。
然后,你可以简单地做:
$("#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/
还有'toggleClass'可以用来从bootstrap或自定义css中切换一个类,例如'hidden'。 –
虽然你不会有'slideToggle()'提供的动画效果,这将工作。不过,您也可以使用CSS动画来获得所需的效果。或者你也可以使用jQuery动画。 @GetOffMyLawn – Radmation
如果您使用的css转换比jquery的转换更流畅,但您也会失去很多缓动效果,如果这对你所做的事很重要。 –
看看这个简单的代码片段,用图元本身来切换图像
$('#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>
像[这]( https://jsfiddle.net/ht6soL80/)?你说'没有添加额外的按钮',但是你说'我想放置一个按钮来打开图像'你到底想做什么? – empiric