单击 Link 时加减切换

Question

我有一个带加号的 link（更多详细信息[+]）...当用户单击 link 时，我希望 link 变为minus (More Details[-])，并显示其下方的内容。我可以 show/hide 内容，但 +/- 切换不起作用。注意：我是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: '+'; }

Answer 1

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

Answer 2

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

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

也会这样做。

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

单击 Link 时加减切换

Plus Minus Toggle on Clicking a Link

javascript

toggle