JQuery, функция resize()

316

03 февраля 2017, 06:06

Есть элемент div с php-функцией внутри.

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

Как можно решить такую проблему. Исчезают они с помощью классов в bootstrap(visible-lg и т.д.)

Answer 1

Все очень просто. При клике на кнопку снимите класс, блокирующий отображение объекта:

$('#hiddenblock').toggleClass("visible-lg-block");//показать-скрыть

или

$('#hiddenblock').removeClass("visible-lg-block");//только показать

Затем удалите кнопку, если нужно:

$(this).remove();

$('#show').click(function(){ 
    $('#hiddenblock').toggleClass("visible-lg-block"); 
}) 
$('#showandremove').click(function(){ 
    $('#hiddenblock').removeClass("visible-lg-block"); 
    $(this).remove(); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<button id="show" class="hidden-lg"> 
      Показать/скрыть блок 
</button> 
 
<button id="showandremove" class="hidden-lg"> 
      Показать и убрать кнопку 
</button> 
 
<div id="hiddenblock" class="visible-lg-block"> 
      Контент, спрятанный на мобильной версии 
</div>