jQuery 切换滑动方向错误

Question

我有一个功能齐全的 jFiddle，对我来说运行良好...但是，我想知道是否有人可以向我指出需要进行哪些更改才能使文本显示在单击的按钮下方.. . 当前单击的按钮向下滑动并位于文本下方 - 我真的很希望文本成为从徽标向下滑动的内容。

如有任何帮助，我们将不胜感激！

jQuery(function ($) {
$(".more").hide();
$('.button-read-more').click(function () {
    $(this).closest('.less').addClass('active');
    $(this).closest(".less").prev().stop(true).slideDown("1000");
    });
$('.button-read-less').click(function () {
    $(this).closest('.less').removeClass('active');
    $(this).closest(".less").prev().stop(true).slideUp("1000");
    });
});

Answer 1

如果您可以随意修改 HTML，您可以将文字移至图片下方

来自这里：

<div class="more" style="display:none">
    <p align="justify">Our full service real estate brokerage, Brooks Realty, carries on a decades-spanning legacy of serving Northwest Florida's Emerald Coast with "Everything in Real Estate"</p>
</div>

<div class="less">
    <a class="button-read-more button-read" href="#read"><img src="http://test.southernventures.com/wp-content/uploads/2015/01/svc_home_brk.png"></a>
    <a class="button-read-less button-read" href="#read"><img src="http://test.southernventures.com/wp-content/uploads/2015/01/svc_home_brk_color.png"></a>
</div>

为此：

<div class="less">
    <a class="button-read-more button-read" href="#read"><img src="http://test.southernventures.com/wp-content/uploads/2015/01/svc_home_brk.png"></a>
    <a class="button-read-less button-read" href="#read"><img src="http://test.southernventures.com/wp-content/uploads/2015/01/svc_home_brk_color.png"></a>
</div>
    <div class="more" style="display:none">
    <p align="justify">Our full service real estate brokerage, Brooks Realty, carries on a decades-spanning legacy of serving Northwest Florida's Emerald Coast with "Everything in Real Estate"</p>
</div>

然后更新您的 JavaScript 以查找 next 元素，而不是 prev。

所以这个：

    $(this).closest(".less").prev().stop(true).slideDown("1000");

变成

    $(this).closest(".less").next().stop(true).slideUp("1000");

这里是 fiddle：http://jsfiddle.net/LHcgp/154/

jQuery 切换滑动方向错误

jQuery Toggle Slide Wrong Direction

html

css

jquery

slidetoggle