如何使显示变化的onclick（）

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

尝试这个：

$(".index-navi-frame-box p").click(function() {
  $(".index-navi-expanded").css("display", "block");
});

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>