javascript - Laravel - 显示更多/更少按钮冲突

Question

我有一个多个切换按钮，当我单击第一个切换按钮时出现问题，第二个按钮已卡住，我必须双击它们。

代码如下:(

Javascript

visible = true; //var that keeps track if the content is visible.
txt6 = document.getElementById("text6");
btn6 = document.getElementById("btn6");
convert8 = document.getElementById("convert8");

function toggle7() {
    if (visible) {
        visible = 0;
        convert8.style.display = 'none';
        btn6.innerHTML = '<i class="fas fa-plus"></i> Show More ';
        txt6.style.display = 'none';

    } else {
        visible = 1;
        convert8.style.display = 'block';
        btn6.innerHTML = '<i class="fas fa-minus"></i> Show Less';
        txt6.style.display = 'table';
    }
}

按钮

<button class="btn-hover color-1" id='btn6' onclick='toggle7()' style="float:left;"><i class="fas fa-plus"></i> Show More </button>

表格

<table id='text6' style='display: none; '>
    <tr>test</test>
</table>

注意此切换按钮位于页面中的 6 个切换按钮中，一切正常，但如果第一个切换按钮打开，我必须双击第二个切换按钮。所有按钮的 javascript 保持相同，我只是更改了元素的 id 和函数名称。有什么建议吗？

Answer 1

将 visible = true; 替换为 visible = false; 并重试