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