Question

Iv创建了一个基本的垂直滑动菜单，可以在左侧垂直灰色栏中看到：

http://www.switchcreative.co.uk/tuckagefinewines/

当您点击某个国家/地区时，子菜单项会向下滑动，顶级+符号会变为 - 但是当菜单再次关闭时，如何将其更改回+。我想我想添加一个偶数滑动眼镜向上运动？但不确定如何。我尝试使用if语句来改变它，但无法让它在这里工作是我最接近的版本工作方式我喜欢：

 function initMenu() {
 $('#menu ul:not(.active)').hide();
 $('#menu li a.top_a').click(
 function(e) {
    e.preventDefault();
    $(this).next().slideToggle('normal');
    $(this).siblings('.plus').replaceWith(' - ');   
   }
 );
}

Answer 1

您要删除span.plus尝试设置如下文字：

if($(this).siblings('.plus').text() == '+')
    $(this).siblings('.plus').text('-');
else
    $(this).siblings('.plus').text('+');

Answer 2

您可以检查每个子元素的CSS高度。如果它大于0，则.plus元素应再次替换为“+”。 slideToggle（）除了改变en元素的高度外什么都不做。你可以阅读它here

Answer 3

更改此行：

$(this).siblings('.plus').replaceWith(' - ');

为：

if($(this).siblings('.plus').length > 0){
    $(this).siblings('.plus').removeClass('.plus').addClass('.minus').text(' - ');
}
else {
    $(this).siblings('.minus').removeClass('.minus').addClass('.plus').text(' + ');
}

甚至还有两个跨度：

<span class="plus"> + </span><span class="minus"> - </span>

.plus可见，.minus为display: none;。然后，当您切换下一个元素时，只需执行以下操作：

$(this).siblings('.plus, .minus').toggle();

使用slidetoggle（）轻微问题的jquery菜单

3 个答案: