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

Question

我的网站有页脚菜单，它非常适合用于桌面，但我想显示这些菜单作为显示和隐藏jquery项目的移动方式加上打开和减去关闭..i不要有关于jQuery的多knoweldge，因此，任何一个请帮助我这个请....页脚菜单HTML低于

html

<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> 

js

<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> 

Answer 1

<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> 

演示https://jsfiddle.net/tqckrzc5/

演示2（块链接）https://jsfiddle.net/tqckrzc5/1/