javascript - 我如何在图像不移动的情况下在图像下滑动切换()文本？

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;}

Example Example

Answer 1

您可以使用此选择器仅切换您感兴趣的一个元素:

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

然后还要将表格单元格的垂直对齐属性设置为顶部以防止其他单元格移动。

jsFiddle example