从jQuery的响应式菜单项隐藏子项目

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

 

 
*{ 
 
\t -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
\t -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
\t 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; 
 
\t 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