PC時のアコーディオンメニュー

アコーディオンメニューについて質問させて頂きます。

レスポンシブでフッターメニューを作っています。
カテゴリAとBは横並び、スマホ時はアコーディオンにします。

下記で見た目はちゃんとできているのですが、
PCの時に、.toggleをクリックするとこちらも開閉するようになってしまっています。
PCの時は.toggleのリンク無効、スマホの時はアコーディオンメニューが効くようにしたいです。
よくある手法なのでやり方はちゃんとあると思うのですが、検索しても希望通りのスタイルが出てこず、困ってしまいました。
プラス、切り替わり時に開閉をリセットしたいです。

もっと無駄なくスマートなやり方があるな気がしますが、とりあえずこのような手法です。

<div class="footer_pcmenu footer_acmenu" id="footer_menu">

    <ul>

        <li>
            <a class="toggle" href="index.html">カテゴリA</a>
            <ul>
                <li><a href="index.html">リンク1</a></li>
                <li><a href="index.html">リンク2</a></li>
                <li><a href="index.html">リンク3</a></li>
                <li><a href="index.html">リンク4</a></li>
            </ul>
        </li>

        <li>
            <a class="toggle" href="index.html">カテゴリB</a>
            <ul>
                <li><a href="index.html">リンク5</a></li>
                <li><a href="index.html">リンク6</a></li>
                <li><a href="index.html">リンク7</a></li>
                <li><a href="index.html">リンク8</a></li>
            </ul>
        </li>

    </ul>

</div>

// アコーディオンメニュー
$(function() {
    function accordion() {
        $(this).toggleClass("active").next().slideToggle(300);
    }
    $(".footer_acmenu .toggle").click(accordion);
});

// アコーディオンメニュー クラス入れ替え
$(window).resize(function(){
    //windowの幅をxに代入
    var x = $(window).width();
    //windowの分岐幅をyに代入
    var y = 769;
    if (x <= y) {
        $('#footer_menu').addClass('footer_acmenu');
    } else {
        $('#footer_menu').removeClass('footer_acmenu');
    }
});