Question

我正在制作一个简单的网页，并且碰壁了。现在，我在页面上放置了一些带有slideToggle动画的按钮，当你点击一个按钮时，会在按钮下面直接打开一个段落。我的问题是，如何让所有这些单独的段落出现在同一个地方？我希望它们都出现在页面的底部，这样当你点击一个按钮时，其他任何按钮都不会在页面上笨拙地跳转。这是我的HTML：

<h2>Click to learn more about me!</h2>
    <div class="trait">
        <button>Trait1</button>
    </div>
    <p class="note">Blah</p>

    <div class="trait">
        <button>Trait2</button>
    </div>
    <p class="note">BlahBlah</p>

    <div class="trait">
        <button>Trait3</button>
    </div>
    <p class="note">BlahBlahBlah</p>

这是我的CSS：

div {
    display: inline-block;
}

div p {
    position: relative;
    margin-top: 450px;
}

button {
    border-radius: 100%;
    height: 150px;
    width: 150px;
}

.note {
    color: white;
    font-size: 30px;
    position: relative;
    bottom: 0;
}

Answer 1

我认为您要使用position: absolute;代替relative，并设置left属性。例如：

.note {
    color: white;
    font-size: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
}

这会导致所有.note段落在文档的左下角相互重叠。

Answer 2

你可以只有另一个div <div id="paragraphInfo"></div>将它放在你想要的位置然后使用jQuery来获取段落信息并在新的div中显示它。

你可以修改slideToggle来显示和隐藏你想要什么，但他只是想给你一个想法。

$(document).ready(function(){
      $('#paragraphInfo, p').hide();

      $('button').click(function(){
            $('#paragraphInfo').hide();
            pText = $(this).parent().next('.note').html();
            $('#paragraphInfo').html(pText);

            $('#paragraphInfo').slideToggle();
      });

});

<强>更新

添加段落隐藏一旦点击按钮，它现在应该正确滑动切换。

如何使用CSS HTML在同一区域中显示单独的段落

2 个答案: