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

如何在不添加额外按钮的情况下制作可折叠的图形元素？jquery：我怎样才能让一个数字元素可折叠？

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

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

来源

2016-11-22 S. Braun

像[这]（ https://jsfiddle.net/ht6soL80/）？你说'没有添加额外的按钮'，但是你说'我想放置一个按钮来打开图像'你到底想做什么？ – empiric

你可以使用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/

来源

2016-11-22 20:49:19 Radmation

还有'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>

来源

2016-11-22 21:02:24

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

回答

相关问题