Hide subitems from a item of a responsive menu with jQuery

Question

well I have a responsive menu that changes state according to screen resolution, this menu is not my code, but I have implemented it very well on my site, the problem is that when displaying on mobile viewport the sub items from the menu are shown by default, and I want them to be desplayed only when parent item is clicked, if I click the parent item it shows/hides them correctly, but I want them to start hidden, I don't know if I make myself clear, but here is the code. Hope I used the snippet correctly to show my code, on emulator tests runs fine, but I don't want subitems to be shown until clicked on parent item

<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

Try this:

$(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');

                }
        });

    });

I just checked the window width outside of the resize() function call so if the screen is less than 767 it'll hide those submenus. You can also see it in action here.