Question

所以我使用以下脚本;打开和关闭侧栏。

def index 

 rows = []
  CSV.foreach('test.csv', headers: true) do |row|
    rows << row.to_hash
   json_data = rows.to_json #converts all of the rows to JSON data
    @users = json_data
end

我想要实现的不是像<; p>这样的两个按钮

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

是否有一个按钮可以执行这两个操作，就像第一次单击它打开侧栏一样，第二次单击它时侧边栏就会关闭。

Answer 1

然后有一个按钮：

<a href="#" onclick="toggleNav()">Toggle</a>

在函数中确定要采取的操作：

function toggleNav() {
    var element = document.getElementById("mySidenav");
    if (element.style.width == "250px") {
        element.style.width = "0px";
    } else {
        element.style.width = "250px";
    }
}

Answer 2

仅使用一个按钮和OP功能：

<a href='#' onclick=" \
    if (document.getElementById("mySidenav").style.width == "250px") { \
        closeNav(); \
    } else { \
        openNav(); \
    } \
">Toggle</a>

这将有一个标记为切换的按钮，并在单击时调用OP的功能。反斜杠用于转义行尾字符

Answer 3

这必须有效：

＆＃13;

function toggleNav() {
  var elem = document.getElementById('mySidenav');
  
  elem.setAttribute('style', (elem.clientWidth == 250) ? 'width: 0' : 'width: 250px');
}

＆＃13;

如何使用相同的按钮进行打开和关闭

3 个答案: