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

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -