Question

我想通过单击此图标将显示更改为阻止：

<div class="index-navi-frame-box">
   <p onclick="expandFunction()">
      <i class="fa fa-bars"></i>
   </p>
</div>

这就是应该改变的地方

<div class="index-navi-expended"></div>

Css：

.index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
position: relative;
display: none;

}

Answer 1

使用jQuery，您可以删除旧的类并添加新的类，如下所示：

$(".index-navi-frame-box").on("click", function() {

    $(this).removeClass("index-navi-frame-box").addClass("index-navi-expended);

});

但是，如果可能的话，我建议新类仅覆盖旧类的样式，因此您可以添加新类而不删除旧类。

尝试避免使用内联JavaScript（onclick=""），并将代码放在单独的.js文件或<script></script>标记中。

Answer 2

尝试一下：

C:\>sqlplus mdp/test@xe

SQL*Plus: Release 11.2.0.2.0 Production on Ned Vel 3 18:12:52 2019

Copyright (c) 1982, 2014, Oracle.  All rights reserved.


Connected to:
Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64bit Production

SQL> select * from v_test;

        ID
----------
         1
         2
         3
         4
         5

SQL>

Answer 3

使用纯JavaScript，您可以仅使用Element.classList属性来切换此类，如下所示：

var x = document.querySelector(".index-navi-frame-box");
x.addEventListener("click", function(){
  this.classList.add("index-navi-expended");
  this.classList.remove("index-navi-frame-box");
})

.index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
}

<div class="index-navi-frame-box">
   <p>
      ABCD
      <i class="fa fa-bars"></i>
      1234
   </p>
</div>

Answer 4

您可以使用toggleClass在两个类之间切换。

HTML

<div id="index-navi" class="index-navi-frame-box">
   <p id="toggleNav"><i class="fa fa-bars"></i></p>
</div>

JS

$('#toggleNav').click(function() {
    $('#index-navi').toggleClass('index-navi-frame-box');
    $('#index-navi').toggleClass('index-navi-expended');
});

Answer 5

考虑以下代码，

<div class="index-navi-frame-box"><p onclick="customfunction()"><i class="fa fa-bars"></i></p></div>

<div class="index-navi-expended" id="index-expandable"></div>

<script>

function customfunction(){
  var index_expandable = document.getElementById('index-expandable');
  index_expandable.style.display = "block";
}


</script>

如何在onclick（）上更改显示

5 个答案: