javascript - How to reverse action on sibling element by jquery -
i want create menu bar sub menu using jquery. there 2 item sub menu. when click on once want slide down , when click second 1 second 1 need slide down first 1 or 1 need slide up. tried following:
html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="footer-lang"> <ul> <li class="lang"> <a href="">eng <i class="fa fa-caret-down" aria-hidden="true"></i></a> <ul> <li><a href="#">en</a></li> <li><a href="#">bn</a></li> </ul> </li> <li class="lang"> <a href="">usd <i class="fa fa-caret-down" aria-hidden="true"></i></a> <ul> <li><a href="#">usd</a></li> <li><a href="#">vnd</a></li> </ul> </li> </ul> </div>
css
.footer-lang ul{ display: block; text-align: center; } .footer-lang .lang{ display: inline-block; } .footer-lang .lang a{ display: block; padding: 8px; color: #000; } .footer-lang .lang > ul{ display: none; position: absolute; }
javascript
$(document).ready(function(){ $('.footer-lang .lang a').on('click', function(e) { $(this).next('ul').slidetoggle('slow'); e.preventdefault(); }); });
on click make other submenu slideup
fast
or slow
, toggle see below snippet more info
$(document).ready(function(){ $('.footer-lang .lang a').on('click', function(e) { $(".lang > ul").slideup("fast"); $(this).next('ul').slidetoggle('slow'); e.preventdefault(); }); });
.footer-lang ul{ display: block; text-align: center; } .footer-lang .lang{ display: inline-block; } .footer-lang .lang a{ display: block; padding: 8px; color: #000; } .footer-lang .lang > ul{ display: none; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="footer-lang"> <ul> <li class="lang"> <a href="">eng <i class="fa fa-caret-down" aria-hidden="true"></i></a> <ul> <li><a href="#">en</a></li> <li><a href="#">bn</a></li> </ul> </li> <li class="lang"> <a href="">usd <i class="fa fa-caret-down" aria-hidden="true"></i></a> <ul> <li><a href="#">usd</a></li> <li><a href="#">vnd</a></li> </ul> </li> </ul> </div>
Comments
Post a Comment