Question

我的网站在页脚中有菜单，它对于桌面非常好，但我想将这些菜单显示为显示和隐藏jquery项目的移动手段加上打开和减去关闭..我没有太多关于jquery的知识，所以任何请帮我这个....页脚菜单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/

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

1 个答案: