Есть адаптивное меню, при просмотре на расширении 320-480px, оно становится вертикальным выпадающим. Так вот подменю раскрываются по hover, а надо что бы по click js. Что необходимо изменить в коде, что бы это исправить?
Привожу код JS:
$( document ).ready(function() {
$("#topMenu").click(function(){
$("#pagemenucontainer").slideToggle(500);
});
var count = 0;
$("#mli_open").parent(".mli_toggle").parent(".mli").click(function(){
count += 1;
if (count==1) {
//$(this).children("a").removeAttr("href");
}
else {
//$(this).children("a").attr("href", "<?php echo $category['href']; ?>");
//$(this).children("a").attr("href", "<?php if($category){ echo $category['href'];} ?>");
}
// $(".mli>a").removeAttr("href");
//$('.mli>.mli_toggle').slideToggle(500);
//$(this).addClass("mli_a");
});
});
также код меню на php:
<?php if ($categories) { ?>
<div id="menu">
<ul>
<li><a href="/"><?php echo $text_home; ?></a></li>
<?php foreach ($categories as $category) { ?>
<li class="mli" ><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div class="mli_toggle">
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul id="mli_open">
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
<li><a href="http://royal-apartment.kiev.ua/index.php?route=information/contact">Инфо</a></li>
</ul>
</div>
<?php } ?>
Перепробовал разные варианты, но не нашел правильного. Подсказали, что подменю тут срабатывает через стили css, но как это побороть, и сделать его с помощью js? Спасибо.
Ссылка на
проект (ПКМ не работает, только через консоль разработчика в браузере)
Простой
Простой