У меня есть кнопка с функцией, которая разрушает 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
Большое спасибо
Ты можешь перемещать в 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Г - в. Я надеюсь, что он ты смог помогать.