Ранее я получил заголовок с выпадающим списком, который отображался при наведении указателя мыши. Я хотел изменить это на onclick.Выпадающее окно onclick, нажмите на ссылку
В раскрывающемся списке отображается onclick, но при повторном нажатии раскрывающееся меню не закрывается. Он закрывается только тогда, когда мышь перемещается с div.
Как это изменить, чтобы раскрывающийся список всегда был открытым и только можно закрыть, щелкнув где-нибудь на веб-сайте или на мероприятии?
Код:
<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">
<div class="block block-progress opc-block-progress minicart-wrapper">
<div class="block-title-cartsidebar">SHOPPINGCART</div>
<p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p>
</div>
</div>
</div>
Я использую этот код для выпадающего списка на сайте:
<?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('click', '.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 is opened (parent already 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' to 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 is delayed the same amount of time as drop-down animation. ?>
clearTimeout(dMenuPosTimeout);
dMenuPosTimeout = setTimeout(function() {
if (ddMenu.offset().left < 0)
{
var space = ddWrapper.offset().left; <?php //Space available on the 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, to 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');
});
Вы бы разделили сгенерированный html вашего php-кода. Я не вижу HTML-код DropDown-Menu в вашем коде! –
@ Rami.Q Я редактирую код. –
Демонстрация в jsfiddle будет приветствоваться! :) –