代码之家 › 专栏 › 技术社区 › user5321787

单击链接时的加减切换

toggle javascript

user5321787 · 技术社区 · 6 年前

我有一个带加号的链接(更多详细信息[+])。。。当用户单击链接时,我希望链接更改为负号(更多详细信息[-]),并显示其下方的内容。我可以显示/隐藏内容,但+/-切换不起作用。注意:我是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>

以及showplus和showminus的CSS

.showminus:before { content: '-'; } 
.showplus:before { content: '+'; }

2 回复 | 直到 6 年前

dave 6 年前

.removeClass 和 .addClass 是jQuery函数。您需要使用 .classList.add 和 .classList.remove

// Plus/Minus Toggle
function toggle_plus(id) {
    var f = document.getElementById(id);
    if (f.classList.contains("showplus")) {
            f.classList.remove("showplus");
            f.classList.add("showminus");
        } else {
            f.classList.remove("showminus");
            f.classList.add("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';
   }
}

.showminus:before { content: '-'; } 
.showplus:before { content: '+'; }

<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>

jameslol 6 年前

除了Dave的回答(我没有足够的代表发表评论:/),toggle是你的朋友。

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

也会这样做。

此外,Chrome inspector控制台是您的朋友-它会向您抛出错误。 https://developers.google.com/web/tools/chrome-devtools/console/