jquery - How can i make my sub-menu show and hide when click on main item? -


$('.slideout-menu li').click(          function() {               $(this).children('.mobile-sub-menu').show();          },          function() {                $(this).children('.mobile-sub-menu').hide();      }); 
.slideout-menu {    position: absolute;    top: 100px;    left: 0px;    width: 100%;    height: 100%;    background: rgb(248, 248, 248);    z-index: 1;  }    .slideout-menu .slideout-menu-toggle {    position: absolute;    top: 12px;    right: 10px;    display: inline-block;    padding: 6px 9px 5px;    font-family: arial, sans-serif;    font-weight: bold;    line-height: 1;    background: #222;    color: #999;    text-decoration: none;    vertical-align: top;  }  .slideout-menu .slideout-menu-toggle:hover {    color: #fff;  }  .slideout-menu ul {    list-style: none;    font-weight: 300;    border-top: 1px solid #dddddd;    border-bottom: 1px solid #dddddd;  }  .slideout-menu ul li {    /*border-top: 1px solid #dddddd;*/    border-bottom: 1px solid #dddddd;  }  .slideout-menu ul li {    position: relative;    display: block;    padding: 10px;    color: #999;    text-decoration: none;  }  .slideout-menu ul li a:hover {    background: #aaaaaa;    color: #fff;  }  .slideout-menu ul li {    position: absolute;    top: 15px;    right: 10px;    opacity: .5;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="slideout-menu">      <ul>        <li><a href="#">manuals</a>          <ul class="mobile-sub-menu">            <li><a href="#">1</a></li>            <li><a href="#">1</a></li>            <li><a href="#">1</a></li>          </ul>        </li>        <li><a href="#">news</a></li>        <li><a href="#">spare part</a></li>        <li><a href="#">photo gallery</a></li>        <li><a href="#">where buy</a></li>        <li><a href="#">support</a></li>        <li><a href="#">edit book</a></li>      </ul>    </div>

i add sub-item under manuals main item. can make sub-menu hide , show when click on parent main item?

i try write jquery code right can hide item cannot let show again. wrong on jquery code?

just replace (show/hide) "toggle" function :

$('.slideout-menu li').click(     function() {           $(this).children('.mobile-sub-menu').toggle(); });  

and work fine .

toggle function : http://api.jquery.com/toggle/


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -