Jquery 如何将页脚菜单显示为显示和隐藏

我的网站在页脚有菜单，这对桌面来说很好，但我想把这些菜单显示为显示和隐藏jquery项，用于移动设备，意味着加号打开，减号关闭。我对jquery了解不多，所以请任何人帮我解决这个问题。。。。页脚菜单html如下

html

演示

演示2块链接

---

让我们看看你想要什么tried@madalinivascu请再次检查我把我所有的代码都放好了你想要这样的一个命令：？好的，但我有3列，你能给我发3列的代码吗

<ul class="open">
    <li><a href="#">OUR PHILOSOPHY</a></li>
    <li><a href="#">ANTI-MALWARE</a></li>
    <li><a href="#">ANTI-VIRUS</a></li>
    <li><a href="#">ANTISPAM</a></li>
    <li><a href="#">FIREWALL</a></li>
    <li><a href="#">BACKUP & RECOVERY</a></li>

</ul> 

<script>
    function mobile() {
        if ($(window).width() < 500) {

            console.log('is mobile');

            $("#mobile-tabs .open").hide();
            $("#mobile-tabs h1").click(function() {
                $(this).next("#mobile-tabs .open").slideToggle(500);
                $(this).toggleClass("expanded");
            });
        }
    }

    $(window).resize(mobile);
    mobile();
</script>  

<footer>
<div id="block">
<a href="#" class="expandBtn" id="expand">Mobile Footer Expand 1 </a>
<ul class="open" id="open">
    <li><a href="#">OUR PHILOSOPHY</a></li>
    <li><a href="#">ANTI-MALWARE</a></li>
    <li><a href="#">ANTI-VIRUS</a></li>
    <li><a href="#">ANTISPAM</a></li>
    <li><a href="#">FIREWALL</a></li>
    <li><a href="#">BACKUP & RECOVERY</a></li>

</ul>  
</div>
    <div id="block">
<a href="#" class="expandBtn" id="expand">Mobile Footer Expand 2 </a>
<ul class="open" id="open">
    <li><a href="#">OUR PHILOSOPHY 2</a></li>
    <li><a href="#">ANTI-MALWARE 2</a></li>
    <li><a href="#">ANTI-VIRUS 2</a></li>
    <li><a href="#">ANTISPAM 2</a></li>
    <li><a href="#">FIREWALL 2</a></li>
    <li><a href="#">BACKUP & RECOVERY 2</a></li>

</ul>  
</div>
    <div id="block">
<a href="#" class="expandBtn" id="expand">Mobile Footer Expand 3 </a>
<ul class="open" id="open">
    <li><a href="#">OUR PHILOSOPHY 3</a></li>
    <li><a href="#">ANTI-MALWARE 3</a></li>
    <li><a href="#">ANTI-VIRUS 3</a></li>
    <li><a href="#">ANTISPAM 3</a></li>
    <li><a href="#">FIREWALL 3</a></li>
    <li><a href="#">BACKUP & RECOVERY 3</a></li>

</ul>  
</div>
</footer>



    <script>
        function mobile() {
                  if($(window).width() < 500) {

                    console.log('is mobile');           

                    $("footer #open").hide();
                    $('footer #expand').show();
                    $("footer #block #expand").unbind('click').click(function () { 
                    $("footer #open").hide();
                      $(this).parent().find('#open').toggle();
                    });
                  }else{
                      $("footer #open").show();
                      $('footer #expand').hide();
                  }
                }

                $(window).resize(mobile);
                mobile();
        </script>