Вопросы Теги

показывать или скрывать фильтры, кликнув в кнопку в зависимости от разрешения

У меня есть кнопка с функцией, которая разрушает clicar и(или) разворачивает div с формуляром фильтров. В версии рабочий стол фильтры выходят назначенными по умолчанию развернутые и кнопка они разрушаются clicar. Однако, для подвижной версии, мне хотелось бы, что эти фильтры оказались разрушенными, и нажав на кнопку, они развернутся. Какая-то помощь?

Спасибо.

Html

function myFunction() {
   var x = document.getElementById('filtros');
   var y = document.getElementById('filtros2');
    if (x.style.display === 'block') {
        x.style.display = 'none';
		x.className = "";
		y.className = "";
    } else if (x.style.display === 'none'){
        x.style.display = 'block';
		x.className = " opened";
		y.className = " opened2";
    } else{
			x.style.display = 'none';
			x.className = "";
			y.className = "";
		}

}
.botonera {
  width: 100%;
  height: 57px;
  margin: 1em;
}
.btn {
  display: block;
  border-radius: 0;
  outline: none;
  padding: 0em;
  background-color: #297fca;
  padding-bottom: 0;
  padding-top: 0;
}
 .btn .label {
    color: #fff;
    font-weight: normal;
    font-size: 1.1em;
    top: 5px;
    margin-left: 1em;
}
view.view-ofertas-de-empleo .opened {  
    float: left;
    clear: both;
    margin-bottom: 1em;
    margin-top: 36px;
}
<div class="botonera">
  <button class="btn" onclick="myFunction()">
			    <span class="label">Filtra las Ofertas de Empleo</span>
			</button>
  <div class="opened" id="filtros">
    <form>
      <div>
        <fieldset>
          <legend>
            <span>Perfil Profesional</span>
          </legend>
          <div class="fieldset-wrapper">
            <div>
              <input type="checkbox" id="edit-perfil-profesional-160" name="perfil_profesional[160]" class="form-checkbox"><label for="edit-perfil-profesional-160" class="option">Técnico/a Soporte a la Infraestructura</label>
            </div>
          </div>
        </fieldset>
        <div id="edit-actions"><input type="submit" id="edit-submit-ofertas-de-empleo" value="Aplicar" class="button js-form-submit form-submit"></div>
      </div>
    </form>
  </div>
</div>

https://codepen.io/lamenen/pen/JjoNpwd

Большое спасибо

1
задан 23.12.2019, 14:17
1 ответ

Ты можешь перемещать в travГ©s твоего javascript ее его opciГіn обратная с 'window.matchMedia': QuedarГ - во что-то asГ-: 

function myFunction() {
   var x = document.getElementById('filtros');
   var y = document.getElementById('filtros2');
   var mediaqueryList = window.matchMedia("(min-width: 560px)");

    if (x.style.display === 'block') {
        x.style.display = 'none';
		x.className = "";
		y.className = "";
    } else if (x.style.display === 'none'){
        x.style.display = 'block';
		x.className = " opened";
		y.className = " opened2";
    } else{
			x.style.display = 'none';
			x.className = "";
			y.className = "";
		}

mediaqueryList.addListener( function(EventoMediaQueryList) {
if(EventoMediaQueryList.matches) {
  if (x.style.display === 'none') {
        x.style.display = 'block';
		x.className = "";
		y.className = "";
    } else if (x.style.display === 'block'){
        x.style.display = 'none';
		x.className = " opened2";
		y.className = " opened";
    } else{
			x.style.display = 'block';
			x.className = "";
			y.className = "";
		}
       }
    });


}
.botonera {
  width: 100%;
  height: 57px;
  margin: 1em;
}
.btn {
  display: block;
  border-radius: 0;
  outline: none;
  padding: 0em;
  background-color: #297fca;
  padding-bottom: 0;
  padding-top: 0;
}
 .btn .label {
    color: #fff;
    font-weight: normal;
    font-size: 1.1em;
    top: 5px;
    margin-left: 1em;
}
view.view-ofertas-de-empleo .opened {  
    float: left;
    clear: both;
    margin-bottom: 1em;
    margin-top: 36px;
}
<div class="botonera">
  <button class="btn" onclick="myFunction()">
			    <span class="label">Filtra las Ofertas de Empleo</span>
			</button>
  <div class="opened" id="filtros">
    <form>
      <div>
        <fieldset>
          <legend>
            <span>Perfil Profesional</span>
          </legend>
          <div class="fieldset-wrapper">
            <div>
              <input type="checkbox" id="edit-perfil-profesional-160" name="perfil_profesional[160]" class="form-checkbox"><label for="edit-perfil-profesional-160" class="option">Técnico/a Soporte a la Infraestructura</label>
            </div>
          </div>
        </fieldset>
        <div id="edit-actions"><input type="submit" id="edit-submit-ofertas-de-empleo" value="Aplicar" class="button js-form-submit form-submit"></div>
      </div>
    </form>
  </div>
</div>

я не могу видеть точно, как он работает ты cГіdigo, эта та teorГ - в. Я надеюсь, что он ты смог помогать.

0
ответ дан 23.12.2019, 22:06

Теги

Похожие вопросы