javascript - My clickable jQuery drop-down menu does not work -


i've made clickable drop-down menu using jquery.

the drop-down menu must work like:
1) 'a' dropdown toggle click, 'a' dropdown menu visible
2) not('a' dropdown toggle , 'a' dropdown menu) === dropdownmenu hide
3) settimeout need(i'm code animation css)

i want multiple drop-down menus.

a, b, c, d...and "z"


but drop-down menu gives problem:
1) drop-down toggle click, after b drop-down toggle click === drop-down not hide
2) code not include document.closeset(i want include dropdowntoggle.click(function ()<<<

how can go clear issue? highly appreciated.

$(function(){    	body = $('body');      /* dropdown */    var dropdown = $('.dropdown'),        dropdowntoggle = dropdown.find('.toggle'),        dropdownmenu = dropdown.find('.menu'),        checkdropdownopen = 'close';        dropdowntoggle.click(function() {      $(this).each(function() {              // setinitial        var thisdropdown = $(this).parent('.dropdown'),            thisdropdowntoggle = $(this),            thisdropdownmenu = $(this).next('.menu');          // checkdropdownmenu = open        if (!thisdropdownmenu.hasclass('open') && (thisdropdownmenu.attr('aria-hidden') === 'true' || thisdropdownmenu.attr('aria-hidden') === undefined)) {                  // visible          settimeout(function() {            checkdropdownopen = 'open';            thisdropdownmenu.addclass('open');          }, 10);            // attr change          settimeout(function() {            thisdropdownmenu.attr('aria-hidden', 'false');          }, 218);         } else if (thisdropdownmenu.hasclass('open') && thisdropdownmenu.attr('aria-hidden') === 'false') {          // visible          settimeout(function() {            checkdropdownopen = 'close';            thisdropdownmenu.removeclass('open');          }, 10);            // attr change          settimeout(function() {            thisdropdownmenu.attr('aria-hidden', 'true');          }, 218);         }      })    });        /* dropdownclose() */    function dropdownclose() {      // toggle      dropdownmenu.removeclass('open');        // hidden, attr change      settimeout(function() {        body.removeclass('account-open');        dropdownmenu.attr('aria-hidden', 'true');      }, 218);    }        /* document click */    $(document).click(function(e) {      // dropdown      if (!$(e.target).closest(dropdown).length) {        dropdownclose();      }    });   });
.dropdown .menu {    display: none;  }    .dropdown .menu.open {    display:block;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="dropdown">    <button class="toggle">button</button>    <div class="menu">article</div>  </div>    <div class="dropdown">    <button class="toggle">button</button>    <div class="menu">article</div>  </div>

using existing code, add line:

dropdownclose();

between these lines:

dropdowntoggle.click(function() { $(this).each(function() {

this close entire menu before opening target sibling menu.

another way same thing:

$( document ).ready(function() {   $('.toggle').on('click', function() {     $('.menu').hide(250);      $(this).next().show(500);   }); });

Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more