Question

我一直在浏览一段时间，我仍然需要找到一个相关的答案。我想要隐藏的div，它们都是相同的类来滑动，但当一个滑动时，另一个打开关闭。此外，我希望仅显示正在切换的div的显示信息/隐藏信息。

这是我的HTML

<p>
    <a class="opener" href="javascript:slideTogle();">Click Here For Information</a>
</p>
<div class="content">
    <p>If you are looking to purchase your first home, reduce your existing monthly
        repayments, pay off you mortgage early, raise cash for home improvements
        or to pay off debt or even buy a property to let out we are able to assist
        and advise you from start to finish. We have access to a wide range of
        lenders offering independent mortgages to suit you.</p>
    <p>Your home may be repossessed if you do not keep up repayments on your
        mortgage.</p>
    <ul>
        <li>First time Buyers</li>
        <li>Remortgages</li>
        <li>Capital raising</li>
        <li>Debt Consolidation</li>
        <li>Buy To Let</li>
    </ul>
</div>

这是我的javascript

$(document).ready(function () {
    // put all your jQuery goodness in here.
    $('.content').hide();
    $('.content.open').show();

    $('.opener').click(function () {


        $(this).parent().next('.content').slideToggle(300, function () {
            $(".opener").text($(this).is(':visible') ? "Hide Information" : "Click Here For Information");
        });
    });
});

我是jquery / javascript的新手，但我对php有基本的了解并且对html / css有很好的了解。

感谢

Answer 1

赞this？

$(document).ready(function () {
    // put all your jQuery goodness in here.

    $('.opener').click(function (e) {
        var $opener = $(this);
        var $content = $opener.parent().next('.content');        

        e.preventDefault();

        $content.toggleClass('open').slideToggle(300, function(){
            $opener.text($content.hasClass('open')?"Hide Information":"Click Here For Information");
        });

    });
});

Jquery Slidetoggle多个滑动div

1 个答案: