Javascript 单击时如何切换span的内容？

我有一个带有下拉菜单的导航栏。我在跨度内的下拉菜单前面有一个+。我想加切换到-当菜单被放下，回到+当菜单被打开（隐藏）。我该怎么做

我的html看起来像

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li class="shop"><a href="#"><span>+</span>Shop</a>
            <ul class="shopList">
                <li><a href="#">New Arrivals</a></li>
                <li><a href="#">Dresses</a></li>
                <li><a href="#">Jumpsuits</a></li>
            </ul>
        </li>
        <li><a href="wholesale.php">Wholesale</a></li>
        <li><a href="retailers.php">Retailers</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

这是我的css

nav{
   position:relative;
   display:block;
   width:70%;
   margin:0;
   padding:3px 15%;
   border-top:1px solid #d0d0d0;
   text-align:center;
   font:15px 'OpenSans';
   z-index: 999;
}
nav ul{
   position:relative;
   width:100%;
   margin:0;
   padding:0;
}
nav li{
   display:inline-block;
   margin:0 10px;
   padding:0;
}
nav li ul li{
   position:relative;
   display:block;
   width:150px;
   margin:0;
   padding:0;
}
.shopList{
   position:absolute;
   display:none;
   width:100px;
   margin:0 0 0 -50px;
   padding:0;
}
nav a{
   position:relative;
   display:block;
   width:auto;
   margin:0;
   padding:0;
   color:#707070;
   text-decoration:none;
}    

---

一种解决方案是将以前的文本与新文本进行比较：

$（'.shop'）。单击（函数（）{
$（'.shopList'）。滑动切换（“快速”）；
$（“a span”，this）.text（）==“+”？$（“a span，this）.text（“-”）：$（“a span，this）.text（“+”）；
});
nav{
位置：相对位置；
显示：块；
宽度：70%；
保证金：0；
填充：3×15%；
边框顶部：1px实心#d0；
文本对齐：居中；
字体：15px“OpenSans”；
z指数：999；
}
导航ul{
位置：相对位置；
宽度：100%；
保证金：0；
填充：0；
}
李海军{
显示：内联块；
利润率：0.10px；
填充：0；
}
纳夫利乌尔{
显示：无；
}
李宇利{
位置：相对位置；
显示：块；
宽度：150px；
保证金：0；
填充：0；
}
.购物清单{
位置：绝对位置；
显示：无；
宽度：100px；
利润率：0-50px；
填充：0；
}
导航a{
位置：相对位置；
显示：块；
宽度：自动；
保证金：0；
填充：0；
颜色：#707070；
文字装饰：无；
}























很抱歉，我本应该包括我的css。我的shoplist类以隐藏形式开始，仅在单击后显示。这对我不适用。我已经包括了我的css上面。希望它能帮上忙。我无法让它工作。我的下拉菜单不再下拉。我已上传到live站点，因此您可以从代码中获取示例www.shopadhira.com取消注释文档就绪事件。在代码片段中，它运行在dom ready上，所以不需要，但在您的站点中，它需要它：）我觉得很愚蠢。感谢您的快速回复和帮助。
nav{
   position:relative;
   display:block;
   width:70%;
   margin:0;
   padding:3px 15%;
   border-top:1px solid #d0d0d0;
   text-align:center;
   font:15px 'OpenSans';
   z-index: 999;
}
nav ul{
   position:relative;
   width:100%;
   margin:0;
   padding:0;
}
nav li{
   display:inline-block;
   margin:0 10px;
   padding:0;
}
nav li ul li{
   position:relative;
   display:block;
   width:150px;
   margin:0;
   padding:0;
}
.shopList{
   position:absolute;
   display:none;
   width:100px;
   margin:0 0 0 -50px;
   padding:0;
}
nav a{
   position:relative;
   display:block;
   width:auto;
   margin:0;
   padding:0;
   color:#707070;
   text-decoration:none;
}