Question

我有一个带加号的链接（更多详情[+]）...当用户点击链接时，我希望链接更改为减号（更多详细信息[ - ]），并显示以下内容它。我可以显示/隐藏内容，但+/-切换不起作用。注意：我是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

＆＃13;

// 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';
   }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

除了Dave的答案（我没有足够的评论评论：/），切换是你的朋友。

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

单击链接时加减号切换

2 个答案: