1

我正在制作一个简单的网页，但遇到了一堵墙。现在，我在页面上布置了一些带有 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;
}
4

2 回答 2

1

我认为你想使用position: absolute;而不是relative，并设置一个left属性。例如：

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

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

于 2013-06-07T18:41:05.903 回答
0

您可以只使用另一个 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();
      });

});

更新

添加了单击按钮后隐藏段落，因此它现在应该正确滑动切换。

于 2013-06-07T18:49:13.670 回答