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：我怎樣才能讓一個數字元素可摺疊？

回答

相關問題