Javascript 单击链接时的加减切换

我有一个带有加号的链接（更多详细信息[+]）。。。当用户单击链接时，我希望链接更改为负号（更多详细信息[-]），并显示其下方的内容。我可以显示/隐藏内容，但+/-切换不起作用。注意：我是javascript新手，所以请耐心对待我所缺乏的知识

注意：这里有一些关于+/-切换的帖子。我需要以下代码的帮助

下面是javascript

// Plus/Minus Toggle
function toggle_plus(id) {
    var f = document.getElementById(id);
    if (f.classList.contains("showplus")) {
            f.removeClass("showplus");
            f.addClass("showminus");
        } else {
            f.removeClass("showminus");
            f.addClass("showplus");
        }
}
// Toggle to show and hide content below the link
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block') {
      e.style.display = 'none';
   } else {
      e.style.display = 'block';
   }
}

下面是内容的html

<div class="teamdetail">
    <a href="javascript:void(0)" onclick="toggle_visibility('team4'); toggle_plus('team4Plus');">More Details [<span id="team4Plus" class="showplus"></span>]</a>
</div>
<div id="team4" class="teamtxt">
    Text Goes Here
</div>

---

.removeClass

和

.addClass

是jQuery函数。您需要使用

.classList.add

和

.classList.remove

//加/减切换
功能切换加（id）{
var f=document.getElementById（id）；
如果（f.classList.contains（“showplus”））{
f、 类列表。删除（“showplus”）；
f、 类列表。添加（“show减号”）；
}否则{
f、 类列表。删除（“show减号”）；
f、 类列表。添加（“showplus”）；
}
}
//切换以显示和隐藏链接下方的内容
功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）{
e、 style.display='none'；
}否则{
e、 style.display='block'；
}
}

.showminus:在{content:'-'；}之前
.showplus:在{content:'+'；}

这里有文字

除了Dave的回答（我没有足够的代表评论：/），toggle是你的朋友

// Plus/Minus Toggle
function toggle_plus(id) {
    var f = document.getElementById(id);
    f.classList.toggle("showplus");
    f.classList.toggle("showminus");
}

我也会这么做

---

此外，Chrome inspector控制台是您的朋友-它会向您抛出错误

你太棒了。如果你想帮助解决另一个问题。。。充满希望

// Plus/Minus Toggle
function toggle_plus(id) {
    var f = document.getElementById(id);
    f.classList.toggle("showplus");
    f.classList.toggle("showminus");
}