Как сделать изменение отображения 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

В чистом 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 2

Попробуйте это:

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

Answer 3

рассмотрите следующий код,

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

Answer 4

Используя jQuery, вы можете удалить старый и добавить новый класс следующим образом:

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

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

});

Однако, если это возможно, я бы порекомендовал, чтобы новый класс просто переписывал стили старого класса, поэтомуВы можете просто добавить новый класс, не удаляя старый класс.

Старайтесь избегать встроенного JavaScript (onclick="") и поместите приведенный выше код либо в отдельный файл .js, либо в теги <script></script>.

Answer 5

Вы можете использовать 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');
});