如何在不移动图像的情况下在图像下滑动切换（）文本？答案

【问题标题】：How do i slideToggle() text under images without them moving?如何在不移动图像的情况下在图像下滑动切换（）文本？
【发布时间】：2017-12-04 19:31:05
【问题描述】：

我在一张桌子上有 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

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

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

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

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

jsFiddle example

【讨论】：

天哪，就是这么简单……我现在觉得很愚蠢。自从我编程以来已经有一段时间了。原谅我丑陋的代码。这有效，我的问题解决了。太感谢了！ @j0869

【解决方案2】：

编辑js代码到这个：

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

【讨论】：