Меню ведет себя странно, как это побороть?

Question

[sergey]

Есть несложное меню, при адаптивном просмотре, по клику открывается и закрывается, я добавил код, что бы пункты подменю по клику также срабатывали. Они срабатывают, но меню теперь произвольно сворачивается, а пункты подменю стали не кликабельны. Где я накосячил, подскажите плиз.



код 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");
		});
		
		$( "li.mli" ).click(function() {
			$(this).children('div').toggle();
		});

	});

PHP код меню:

<div id="pagemenucontainer" style=" background-color: #FFF; padding-bottom: 1px; margin-bottom: 10px;">

<div class="container">
<?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 } ?>
</div>
</div>

ссылка на проект
http://jsfiddle.net/ а вот тут работает так как надо.
В чем может быть причина такого поведения меню?

Answer 1

[asdz]

не совсем понятно что вы хотели сделать в закомментированных строках. Мне кажется вам нужно просто сделать проверку: если при клике на элементе<a> у его контейнера<li> есть вложенный список - раскрыть список, по ссылке не переходить, иначе перейти по ссылке в кликнутом элементе.

$("#mli_open").parent(".mli_toggle").parent(".mli").click

- неправильно, т.к. у вас каждый раз навешивается обработчик при клике на topMenu, надо

$("#mli_open").parent(".mli_toggle").parent(".mli").off().click

. А лучше не навешивать его внутри другого обработчика.

Comments

[sergey]

комментировал ни я, я делаю только клик в этом меню. Вот добавил кусок кода а он ругается, сворачивая меню.

[sergey]

попробовал Ваш вариант, но все то же

[asdz]

zorro: zorro: $( "li.mli>a" ).click(function(e) {
if ($(e.target).parent().find('.mli_toggle').length) {
$(this).parent().children('div').toggle();
return false;
}
});

[sergey]

asdz: это вместо чего?

[asdz]

zorro: вместо $( "li.mli" ).click

[sergey]

asdz: работает, круто, огромное спасибо