Javascript 使用动画展开/折叠菜单列表

以下是我想做的：

点击“公文包”

把一切顺利地推下去

新的链接逐渐消失

再次点击“公文包”，以相反的方式进行操作 我目前的代码

$（函数（）{
$（“[data toggle]”）。在（'click'，function（）上{
变量id=$（this）.data（“切换”），
$object=$（id），
className=“打开”；
如果（$对象）{
if（$object.hasClass（className））{
$object.removeClass（类名）
}否则{
$object.addClass（类名）
}
}
});
});
#列表{
显示：无；
}
#list.open{
显示：块；
}














编辑：不要介意有人在评论中回答了你的问题。

我不确定我是否完全理解您的问题，因为您的代码似乎运行良好

我认为，如果您不想更改+和-的文本，可以在列表项的末尾添加一个新的元素/标记来显示它

我不太喜欢JS，但是text（）或html（）可以在列表文本的范围内使用，这样它就不会被更改

HTML:

CSS:
（我对此做了一点更改，但这并不重要，它与我在本地得到的解决方案非常接近）


$（'item3link'）。在（'click'，function（）上{
如果（切换==1）{
toggleOn=0；
$（'#item3icon'）.html（'+'）；
$（'#list'）.addClass（“子类隐藏”）；
}否则{
toggleOn=1；
$（'#item3icon'）.html（'-'）；
$（'#list'）.removeClass（“子类隐藏”）；
}
});
var-toggleOn=0
。子类隐藏{
显示：无；
}
@导入url(http://fonts.googleapis.com/css?family=Lato:900);
* {
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
保证金：0；
填充：0；
-webkit触摸标注：无；
-webkit文本大小调整：无；
-webkit用户选择：无；
-webkit亮点：无；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
}
html{
字体大小：16px；
-webkit过渡：全部.15秒轻松；
}
身体{
字体系列：“Lato”，Arial，无衬线；
文本转换：大写；
}
a{
颜色：继承；
文字装饰：无；
}
导航{
边缘：.5em；
填充：.5em；
}
导航：之前，
导航：之后{
内容：''；
显示：块；
背景：#000；
高度：.3em；
宽度：1.2米；
}
导航ul{
列表样式：无；
}
导航>ul>li{
光标：指针；
线高：1.8em；
}
#李列表{
颜色：#800；
字体大小：.7em；
位置：相对位置；
左边距：1.5em；
}
#李：之后{
内容：''；
显示：块；
背景：#800；
高度：2倍；
宽度：.4em；
位置：绝对位置；
最高：50%；
左：-.8em；
}
#list.open{
显示：块；
}


家
商场


科梅西亚
住所
学院
埃迪菲西奥斯


康塔托

您的问题是什么？代码做了什么你不需要的事？我不知道你有什么麻烦。这就是你想要实现的吗？@AdonaiC–ndido，像这样：？更简单的js:@Albin:）
<nav>
<ul>
    <li>Home</li>
    <li>A Empresa</li>
    <li><a href="#" id="item3link" style="text-decoration: none; text-color:Black;">Portfolio <span id="item3icon">+</span></a>
        <ul id="list" class="subClassHide">
            <li>Comerciais</li>
            <li>Residenciais</li>
            <li>Institucionais</li>
            <li>Edifícios</li>
        </ul>
    </li>
    <li>Contato</li>
</ul>

$('#item3link').on('click', function(){
if (toggleOn == 1) {
    toggleOn = 0;
    $('#item3icon').html('+');
    $('#list').addClass("subClassHide");
}
else
{
    toggleOn = 1;
    $('#item3icon').html('-');
    $('#list').removeClass("subClassHide");
}
});
var toggleOn = 0;

.subClassHide {
display: none;
}