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();

然后还将表格单元格的vertical-align属性设置为top，以防止其他单元格移动。

<强> jsFiddle example

Answer 2

将js代码编辑为此代码：

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

如何在没有它们移动的情况下在图像下滑动（）切换文本？

2 个答案: