Добавить ширину блока при клике

Question

Как добавить ширину style для #base при нажатии на #offcanvas_button и удалить style при нажатии #close_panel.

Есть примитивный код не силен в js. сделал как мог :) Как это реализовать здесь:

jQuery(document).ready(function($) {
  $("#offcanvas_button").click(function() {
    $("[id='vertical_bar']").attr("class", "push");
    $("[id='close_panel']").attr("class", "display");
    $("[id='offcanvas_button']").attr("class", "push_button");
    $("[id='base']").attr("class", "push_all");
  });

  $("#close_panel").click(function() {
    //
    $("[id='vertical_bar']").attr("class", "");
    //
    $("[id='close_panel']").attr("class", "");
    $("[id='offcanvas_button']").attr("class", "");
    $("[id='base']").attr("class", "");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="base">
  <div class="offcanvas">
    <div id="close_panel"></div>
    <div id="offcanvas_button"></div>
    <div id="vertical_bar"></div>
  </div>
</div>

При нажатии #offcanvas_button появляется #vertical_bar а #base сдвигается в сторону. Так как #base имеет width: 100% необходимо установить фиксированную ширину, чтобы содержимое не сжималось при появлении бокового меню.

Answer 1

Для начала выборка по Id осуществляется в jQuery через символ "#", т.е. не : $("[id='close_panel']"); а : $("#close_panel");

И наконец, лучший вариант менять значение атрибута style динамически через добавление /удаление класса функциями addClass/removeClass:

<style>
.new-width { width: XX%; }
</style>
 
$("#offcanvas_button").on('click', function(){
   $('#base').addClass('new-width');
}

$("#close_panel").on('click', function(){
   $('#base').removeClass('new-width');
}

БЛОГ НА HUSL

Добавить ширину блока при клике

Ответы (1 шт):