Как исправить скрипт?
$(function(){
$(".block_main").click(function() {
if (document.getElementById("block_title").style.display = "none" || document.getElementById("block_title").style.display = "") {
document.getElementById("block_title").style.display = "block";
}else{
document.getElementById("block_title").style.display = "none";
}
});
});
Суть такая мне надо что бы при нажатии на блок с классом block_main к блоку с id block_title добавлялся display = "block" если style не задан или не display = "block", а если style display = "block" то изменить его на display = "none" сейчас display = "none" прописан у класса block_title в css файле |
<style>
.block_title { display:none; }
</style>
<div class="block_main">
<div id="block_title" class="block_title">Title</div>
Block main
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$(".block_main").click(function() {
$("#block_title").toggle("block_title");
});
});
</script>
|
Без jQuery по условиям задачи:
<style>#block_title {display: none}</style>
<div id="block_title">БЛОК TITLE</div>
<div class="block_main">БЛОК MAIN - на него нажимать</div>
<script>
document.querySelector('.block_main').addEventListener('click', function() {
var blockTitle = document.querySelector('#block_title'),
valDisplay = blockTitle.style.display;
if (valDisplay == '' || valDisplay == 'none') {
blockTitle.style.display = "block"
}
else {
blockTitle.style.display = "none"
}
});
</script>
Тоже самое, только чуть компактней в коде:
document.querySelector('.block_main').addEventListener('click', function() {
var blockTitle = document.querySelector('#block_title'),
valDisplay = blockTitle.style.display;
blockTitle.style.display = valDisplay == '' || valDisplay == 'none' ? 'block' : 'none';
});
|
Цитата:
blockTitle.style.display = valDisplay != 'block' ? 'block' : 'none'; |
| Часовой пояс GMT +3, время: 16:55. |