Question

我有一个响应式菜单根据屏幕分辨率改变状态，这个菜单不是我的代码，但我在我的网站上实现得很好，问题是当在移动视口上显示菜单中的子项时默认显示，我希望它们仅在单击父项时被显示，如果我单击它显示/隐藏它们的父项，但我希望它们开始隐藏，我不知道我是否清楚自己，但这是代码。希望我正确使用该代码段来显示我的代码，在模拟器测试运行正常，但我不希望子项显示，直到单击父项

<script>
        $(document).ready(function () {
            var touch = $('#touch-menu');
            var menu = $('.menu');
            var touchsub1 = $('#sub-menu-anchor-1');
            var submenu1 = $('#sub-menu-1');
            var touchsub2 = $('#sub-menu-anchor-2');
            var submenu2 = $('#sub-menu-2');
            var touchsub3 = $('#sub-menu-anchor-3');
            var submenu3 = $('#sub-menu-2');

            $(touch).on('click', function (e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(touchsub1).on('click', function (e) {
                e.preventDefault();
                submenu1.slideToggle();
            });
            $(touchsub2).on('click', function (e) {
                e.preventDefault();
                submenu2.slideToggle();
            });
            $(touchsub3).on('click', function (e) {
                e.preventDefault();
                submenu3.slideToggle();
            });

            $(window).resize(function () {
                var w = $(window).width();
                if (w > 767 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
                if (w > 767) {
                    $("#sub-menu-1").css('display:', 'none;');
                    $("#sub-menu-2").css('display', 'none');
                    $("#sub-menu-3").css('display', 'none');

                    }
            });

        });
    </script>

/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);

/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:22px;}
div { position:relative } 
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}

img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 11px;
}

.alignleft, img.alignleft{
display: inline;
    float: left;
    margin-right: 22px;
}

.alignright, img.alignright {
    display: inline;
    float: right;
    margin-left: 22px;
}

.aligncenter, img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}


*{ 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



html{-webkit-font-smoothing:antialiased;}

a{color:#BA0707;}
a:hover{color:#BA0707;text-decoration:underline;}

h1{font-size:36px;line-height:1.3em; }
h2{font-size:32px;line-height:1.3em;}
h3{font-size:24px;line-height:1.3em;}
h4{font-size:18px;line-height:1.3em;}
h5{font-size:16px;}
h6{font-size:14px;}
p{padding-bottom:11px;}
p,div, span{line-height:1.5em;}
.column-clear{clear:both;}
.clear{overflow: hidden;}


.mainWrap{width:960px;margin:0 auto;}

.title{margin:100px 0 20px 0;
text-align:center;
color:#3E4156;}
.back{text-align:center;}

nav{display:block;
margin-top:0;
background:#3E4156;
}

.menu{display:block;}

.menu li{display: inline-block;
position: relative;
z-index:100;}

.menu li:first-child{margin-left:0;}

.menu li a {font-weight:600;
text-decoration:none;
padding:11px;
display:block;
color:#ffffff;

-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover > a{color:#ffffff;
background:#7bd0ab;}

.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 36px;
left: 0px;
background: #ffffff;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#e3f1e6;
border-left:3px solid #0d9670;
color:#797979;
}

.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
	top: 0px;
}

.mobile-menu{display:none;
width:100%;
padding:11px;
background:#0a5a44;
color:#ffffff;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#0d9670;
color:#ffffff;
text-decoration:none;
}


@media (min-width: 768px) and (max-width: 979px) {

.mainWrap{width:768px;}
.menu ul {top:37px;}
.menu li a{font-size:12px;
padding:8px;}
}

@media (max-width: 767px) {

.mainWrap{width:auto;padding:50px 20px;}

.menu{display:none;}

.mobile-menu{display:block;margin-top:0;}

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}

.menu li a:hover, .menu li:hover > a{
background:#afefd3;
color:#797979;
border-left:3px solid #0e8967;}

.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

}

@media (max-width: 480px) {

}


@media (max-width: 320px) {
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  
    <!--<link rel="stylesheet" href="mobile/css/base.css" />  
    <link rel="stylesheet" href="mobile/css/skeleton.css" />
    <link rel="stylesheet" href="mobile/css/layout.css" />--!>

    <!-- CSS MENU -->

    <link rel="stylesheet" href="mobile/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="mobile/font-awesome/css/font-awesome.css" />
  </head>
<body>    
<form id="mainform" runat="server">
         <div class="container">
        <a id="touch-menu" class="mobile-menu" href="#"><i class="icon-reorder">AGROBIZSA</i></a>
            <nav>
                <ul class="menu">
                    <li><a href="#"><i class="icon-home"></i>Inicio</a></li>
                    <li><a id="sub-menu-anchor-1" href="#"><i class="icon-user"></i>Noticias</a>
                        <ul id="sub-menu-1" class="sub-menu">
                            <li><a href="#">Últimas Noticias</a></li>
                            <li><a href="#">Noticias Corporativas</a></li>
                            <li><a href="#">Ecoambiental</a></li>
                            <li><a href="#">Agropecuaria</a></li>
                            <li><a href="#">Innovación</a></li>
                            <li><a href="#">Agronomía</a></li>
                            <li><a href="#">Salud</a></li>
                        </ul>
                    </li>
                    <li><a id="sub-menu-anchor-2" href="#"><i class="icon-camera"></i>eBooks</a>
                        <ul id="sub-menu-2" class="sub-menu">
                            <li><a href="#">Sanidad Vegetal</a></li>
                            <li><a href="#">Medio Ambiente</a></li>
                            <li><a href="#">Social</a></li>
                            <li><a href="#">Suelos y Agua</a></li>
                            <li><a href="#">Producción Agrícola</a></li>
                            <li><a href="#">Gestión</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon-bullhorn"></i>Hoy en la Historia</a></li>
                    <li><a href="#"><i class="icon-envelope-alt"></i>Eventos</a></li>
                </ul>
            </nav>
    </div>
        <div class="container">
            <asp:ContentPlaceHolder ID="empaquetador" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>

Answer 1

试试这个：

$(document).ready(function () {
        var touch = $('#touch-menu');
        var menu = $('.menu');
        var touchsub1 = $('#sub-menu-anchor-1');
        var submenu1 = $('#sub-menu-1');
        var touchsub2 = $('#sub-menu-anchor-2');
        var submenu2 = $('#sub-menu-2');
        var touchsub3 = $('#sub-menu-anchor-3');
        var submenu3 = $('#sub-menu-2');

        $(touch).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(touchsub1).on('click', function (e) {
            e.preventDefault();
            submenu1.slideToggle();
        });
        $(touchsub2).on('click', function (e) {
            e.preventDefault();
            submenu2.slideToggle();
        });
        $(touchsub3).on('click', function (e) {
            e.preventDefault();
            submenu3.slideToggle();
        });

        w = $(window).width();
        if (w < 767) {
            $('.sub-menu').hide();
        }

        $(window).resize(function () {
            var w = $(window).width();
            if (w < 767 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
            if (w > 767) {
                $("#sub-menu-1").css('display:', 'none;');
                $("#sub-menu-2").css('display', 'none');
                $("#sub-menu-3").css('display', 'none');

                }
        });

    });

我刚检查了resize()函数调用之外的窗口宽度，所以如果屏幕小于767，它将隐藏这些子菜单。您还可以在行动here中看到它。

Answer 2

尝试：

$(document).ready(function () {
            var touch = $('#touch-menu');
            var menu = $('.menu');
            var touchsub1 = $('#sub-menu-anchor-1');
            var submenu1 = $('#sub-menu-1');
            var touchsub2 = $('#sub-menu-anchor-2');
            var submenu2 = $('#sub-menu-2');
            var touchsub3 = $('#sub-menu-anchor-3');
            var submenu3 = $('#sub-menu-2');

            $(touch).on('click', function (e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(touchsub1).on('click', function (e) {
                e.preventDefault();
                submenu1.slideToggle();
            });
            $(touchsub2).on('click', function (e) {
                e.preventDefault();
                submenu2.slideToggle();
            });
            $(touchsub3).on('click', function (e) {
                e.preventDefault();
                submenu3.slideToggle();
            });
            touchsub1.trigger('click');
            touchsub2.trigger('click');
            touchsub3.trigger('click');

            $(window).resize(function () {
                var w = $(window).width();
                if (w > 767 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
                if (w > 767) {
                    $("#sub-menu-1").css('display:', 'none;');
                    $("#sub-menu-2").css('display', 'none');
                    $("#sub-menu-3").css('display', 'none');

                    }
            });
});

预览：
http://jsbin.com/nedodafizi/1/edit?html,css,js,output

使用jQuery从响应式菜单项中隐藏子项

2 个答案: