jQuery切换幻灯片错误的方向

时间:2015-01-23 02:44:49

标签: jquery html css slidetoggle

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

非常感谢任何帮助!

http://jsfiddle.net/LHcgp/142/

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");
    });
});

1 个答案:

答案 0 :(得分:0)

如果您可以自由修改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");

这是一个小提琴:http://jsfiddle.net/LHcgp/154/