jQuery Toggle 不能与较新的 jQuery 版本一起正常工作

Question

正如您在图片中看到的那样，我对 jQuery Toggle 有一些问题。主要问题是因为 jQuery 版本。 1.8.3 版完美运行，2.0.3 版效果如下。

知道如何解决这个问题吗？

您可以在 jsfiddle 中查看：enter link description here 使用 jquery 1.8.3 效果很好，而使用 2.0.X 则无法使用。

JavaScript 代码在这里：

$(".toggle-container").hide();
$(".trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});
$(".trigger").click(function(){
    $(this).next(".toggle-container").slideToggle();
});

$(".trigger.opened").toggle(function(){
    $(this).removeClass("active");
    }, function () {
    $(this).addClass("active");
});

$(".trigger.opened").addClass("active").next(".toggle-container").show();

HTML 部分在这里：

    <div class="two-thirds column">

        <!-- Toggle 1 -->
        <div class="toggle-wrap">
            <span class="trigger opened"><a href="#"><i class="toggle-icon"></i> Test </a></span>
            <div class="toggle-container">
                <p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Vivamus justo arcu, elementum a sollicitudin pellentesque, tincidunt ac enim. Proin id arcu ut ipsum vestibulum elementum.</p>
            </div>
        </div>

        <!-- Toggle 2 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 3 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 4 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 5 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 6 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i>Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 7 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test? </a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

    </div>

Answer 1

jQuery .toggle() 事件方法在 jQuery 1.8 中被弃用并在 jQuery 1.9 中被移除。您可以改用.toggleClass() 方法：

$(".trigger").on('click', function() {
    $(this).toggleClass("active");
});