如何在沒有它們移動的情況下在圖像下滑動（）切換文本？

Question

我在一張桌子上有3張圖片，在另一張桌子上有3張圖片。 我想在每個圖像下添加一個按鈕，當您單擊該按鈕時，它將顯示一些文本（“關於img的信息”）。 我已經這樣做但問題是，當我瞄准一個按鈕時，所有其他圖像向下移動，按鈕上方的圖像保持固定。 如果我通過給它們相同的類名來定位所有按鈕，所有圖像都保持固定，就像我想要的那樣，但是當我點擊按鈕時它顯示所有圖像的文本，無論我點擊哪一個都沒關系。

/ *這是HTML * /

<div class="span">
<table>
    <tr>
        <td>
            <div class="imgContainer">
                <div>
                    <img src="images/pinkknitwear.jpg" alt="Pink knitwear" 
                title="Pink Knitwear">
                </div>
                <div class="imgButton">
                    <button value="button">ADD TO CART</button>
                </div>
                <div class="btn-cont">
                    <button class="info-btn">DETAILS</button>
                    <ul class="info1">Super nice!</ul>
                </div>
            </div>
        </td>
        <td>

            <div class="imgContainer">
                <div>
                    <img src="images/greenknitwear.jpg" alt="Green Knitwear" 
                title="Green Knitwear">
                </div>
                <div class="imgButton">
                    <button value="button">ADD TO CART</button>
                </div>
                <div class="btn-cont">
                    <button class="info-btn">DETAILS</button>
                    <ul class="info1">Super nice!</ul>
                </div>
            </div>
        </td>
        <td>
            <div class="imgContainer">
                <div>
                    <img src="images/redknitwear.jpg" alt="Red Knitwear" 
                title="Red Knitwear">

                </div>
                <div class="imgButton">
                    <button value="button">ADD TO CART</button>
                </div>
                <div class="btn-cont">
                    <button class="info-btn">DETAILS</button>
                    <ul class="info1">Super nice!</ul>
                </div>
            </div>
        </td>
    </tr>
 </table>

/ 這是jQUERY /

$(document).ready(function() {
$(".span").on('click', 'button', function() {
    $(this).closest('.span').find('.info1').slideToggle();

});
});

/ 這是CSS /

.info1 {display: none;}


.btn-cont button{

 background-color: white; 
 border: 1px solid dimgrey;
 color: black;
 padding: 7px 10px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 flex-direction: row;

}

 .btn-cont button:hover {
 background: gainsboro;
 text-decoration: none;
 cursor: pointer;
 }

 .btn-cont {margin-top: 10px;}

示例 示例

Answer 1

您可以使用此選擇器僅切換您感興趣的一個元素：

$(this).next().slideToggle();

然后還將表格單元格的vertical-align屬性設置為top，以防止其他單元格移動。

jsFiddle例子

Answer 2

將js代碼編輯為此代碼：

$(document).ready(function() {
    $(".span").on('click', 'button', function() {
        $(this).parents('.imgContainer').find('.info1').slideToggle();
    });
});