jQuery toggle примеры на практике. jQuery появление блока, jQuery toggleClass
В замечательном jQuery есть такой эффект как скрывание элемента и его показ. Если нужно чтобы один блок на сайте при первом нажатии открывался, а при втором нажатии закрывался, то jQuery toggle как раз что нужно.
jQuery toggle примеры для новичков
Вот некоторые jQuery toggle примеры для новичков. Самый простой пример:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#menu").toggle();
});
});
</script>
</head>
<body>
<div id='menu'>
<a href='/'>Главная</a>
<a href='/contact'>Контакты</a>
<a href='/about'>О нас</a>
</div>
<button>Menu</button>
</body>
</html>
Вот примерно будет вот так:
При нажатии на кнопку Menu ссылки исчезнут, а если опять нажать то появятся. То есть можно сделать меню с этим toggle. Если нужно чтобы меню сначала было не видно, и появлялось только при нажатии, то ставим $(‘#menu’).hide(); вот так:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#menu').hide();
$("button").click(function(){
$("#menu").toggle();
});
});
</script>
</head>
<body>
<div id='menu'>
<a href='/'>Главная</a>
<a href='/contact'>Контакты</a>
<a href='/about'>О нас</a>
</div>
<button>Menu</button>
</body>
</html>
То есть у toggle сначала стоит опция показа, а при нажатии выходит опция закрыть. Естественно что вместо #menu может быть любой див или класс (если класс то пишите не #menu, а точку вместо решетки .menu). Это так называемая знаменитая задача jQuery появление блока на сайте.
jQuery toggleClass
Еще есть такой замечательный метод как jQuery toggleClass который добавляет класс к определенному элементу, приведем пример:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("red");
});
});
</script>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<button>Покрась в красный</button>
<p>Это обычный текст который станет красным после нажатия кнопки.</p>
</body>
</html>
Здесь принцип довольно простой, при нажатии на кнопку к параграфам добавится класс red. Прописав в .red свои стили мы может сделать так чтобы при нажатии на кнопку текст менял цвет, к примеру. То есть с помощью данного метода можно менять стили элементов при клике, это так называемое jQuery toggle CSS.
Вэб блог бетінде ақпараттық салаға байланысты көптеген мақалалар бар.