Надеюсь, это маленький.jquery уровень два слайдов вверх и уровень три слайды вниз
У меня есть трехуровневое вертикальное меню. Он построен в Wordpress, и я пытаюсь сохранить его простым, прежде чем начинать вкладывать контент и тому подобное.
У меня есть подменю, чтобы скрыть, и когда вы нажмете кнопку уровня 1, меню уровня 2 сдвинется вниз или сдвинется с места (slideToggle). Моя проблема заключается в том, когда вы нажимаете третий уровень, второй уровень (родительский) продвигается вверх, а третий уровень понижается одновременно. Когда вы снова нажимаете второй уровень, он показывает второй и третий, пока он еще открыт.
Я добавил console.log, чтобы проверить, что происходит, и это показывает следующее: введите вниз вниз выхода вниз войти вверх вверх выход вверх
Так от того, что я вижу, это входит скользить вниз, сползая и уходя. Затем он входит в слайд вверх, выдвигается, а затем выходит. Это сбивает с толку, как если бы это было иначе. Как это сделать?
Я бросил его в кодефене, если кому-то это интересно. http://codepen.io/anon/pen/pJeevd
(Нажмите кнопку 3, а затем нажмите кнопку 3.4, чтобы увидеть эффект третьего уровня) Любые идеи, очень ценимые.
HTML
<ul id="menu-header">
<li id="menu-item-192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-192"><a>Button 1</a>
<ul class="sub-menu">
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="">Button 1.1</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="">Button 1.2</a></li>
</ul>
</li>
<li id="menu-item-158" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-158"><a>Button 2</a>
<ul class="sub-menu">
<li id="menu-item-159" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-159"><a href="">Button 2.1</a></li>
<li id="menu-item-160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-160"><a href="">Button 2.2</a></li>
</ul>
</li>
<li id="menu-item-202" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-202"><a>Button 3</a>
<ul class="sub-menu">
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="">Button 3.1</a></li>
<li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-206"><a href="">Button 3.2</a></li>
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="">Button 3.3</a></li>
<li id="menu-item-207" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-207"><a>Button 3.4</a>
<ul class="sub-menu">
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="">Button 3.4.1</a></li>
<li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-203"><a href="">Button 3.4.2</a></li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="">Button 4</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="">Button 5</a></li>
</ul>
JQuery
$(".menu-item-has-children").click(function(event) {
var target = $(this).find('> .sub-menu');
if(target.is(':visible')) {
console.log('enter up');
target.slideUp(500);
console.log('up');
console.log('exit up');
} else {
console.log('enter down');
target.slideDown(500);
console.log('down');
console.log('exit down');
}
});
CSS
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.sub-menu {
display: none;
}
На самом деле, я думаю, что объясняет, почему он был запуск дважды. Как только вы упоминали, что он запускает «ли» и «а», все это имело смысл. Очень ценю вашу помощь, и это имеет смысл. Еще раз спасибо! –