javascript - Dropdown header from hover to click -
i use code inside our header display our cart. dropdown displayed on hover.
how can modify dropdown displayed onclick
?
<a href="#header-cart" class="skip-link skip-cart <?php if($_cartqty <= 0): ?> no-count<?php endif; ?>"> <span class="icon"></span> <span class="label"><?php echo $this->__('cart'); ?></span> <span class="count"><?php echo $_cartqty; ?></span> </a> <div id="header-cart" class="block block-cart skip-content"> <?php echo $this->getchildhtml('minicart_content');?> </div>
i use code dropdown on website:
<?php //drop-down ?> var ddopentimeout; var dmenupostimeout; var dd_delay_in = 200; var dd_delay_out = 0; var dd_animation_in = 0; var dd_animation_out = 0; $('.clickable-dropdown > .dropdown-heading').click(function() { $(this).parent().addclass('open'); $(this).parent().trigger('mouseenter'); }); //$('.dropdown-heading').on('click', function(e) { $(document).on('click', '.dropdown-heading', function(e) { e.preventdefault(); }); $(document).on('mouseenter', '.dropdown', function() { var ddtoggle = $(this).children('.dropdown-heading'); var ddmenu = $(this).children('.dropdown-content'); var ddwrapper = ddmenu.parent(); <?php //$(this); ?> <?php //clear old position of dd menu ?> ddmenu.css("left", ""); ddmenu.css("right", ""); <?php //show dd menu ?> if ($(this).hasclass('clickable-dropdown')) { <?php //if dropdown opened (parent has class 'open') ?> if ($(this).hasclass('open')) { $(this).children('.dropdown-content').stop(true, true).delay(dd_delay_in).fadein(dd_animation_in, "easeoutcubic"); } } else { <?php //add class 'open' dd ?> cleartimeout(ddopentimeout); ddopentimeout = settimeout(function() { ddwrapper.addclass('open'); }, dd_delay_in); //$(this).addclass('open'); $(this).children('.dropdown-content').stop(true, true).delay(dd_delay_in).fadein(dd_animation_in, "easeoutcubic"); } <?php //set new position of dd menu. //this code delayed same amount of time drop-down animation. ?> cleartimeout(dmenupostimeout); dmenupostimeout = settimeout(function() { if (ddmenu.offset().left < 0) { var space = ddwrapper.offset().left; <?php //space available on left of dd ?> ddmenu.css("left", (-1)*space); ddmenu.css("right", "auto"); } }, dd_delay_in); }).on('mouseleave', '.dropdown', function() { var ddmenu = $(this).children('.dropdown-content'); cleartimeout(ddopentimeout); <?php //clear, close dd on mouseleave ?> ddmenu.stop(true, true).delay(dd_delay_out).fadeout(dd_animation_out, "easeincubic"); if (ddmenu.is(":hidden")) { ddmenu.hide(); } $(this).removeclass('open'); });
change 'mouseenter' --> 'click'
, 'click' less brain damage. still see problem statement not complete if want complete solution want achieve,then perhaps have give more details on problem statement statement want achieve , please provide full html. use fiddler , upload html , scripts , share link.
Comments
Post a Comment