Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2021, 15:11
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

Запретить скрытие блока при клике
Подскажите, пожалуйста, как реализовать, чтобы не закрывался блок .help_content при нажатии на него


<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <style>
    .help_content {
    background: green;
    color: #fff;
    }   
    .close {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    }
    .close:hover {
    opacity: 1;
    }
    .close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
    }
    .close:before {
    transform: rotate(45deg);
    }
    .close:after {
    transform: rotate(-45deg);
    }
    </style>
</head>

<body>

    <div class="helptip-mod">БЛОК</div>
    <br/>
    <div class="helptip-mod">БЛОК2</div>
    <br/>
    <div class="helptip-mod">БЛОК3</div>
    <br/>

    <script>
    document.addEventListener("click",({target})=>{var resp='',rrp='';

    if(target.closest(".helptip-mod")){
        content=target.querySelector(".help_content"),
        otherСontent=document.querySelector(".helptip-mod .help_content");

        if(otherСontent&&otherСontent!=content)otherСontent.remove();

        if(content){
            content.remove();
            }else{
            var tt ='<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>';
            target.insertAdjacentHTML("beforeEnd",'<div class="help_content">'+tt+'<div class="close"></div></div>');
        }
    }

    });
    </script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2021, 15:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Андрей812
как реализовать, чтобы не закрывался блок .help_content при нажатии на него
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.help_content {
background: green;
color: #fff;
}   
.close {
position: absolute;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
</style>
<script>
</script>
</head>
<body>

    <div class="helptip-mod">БЛОК</div>
    <br/>
    <div class="helptip-mod">БЛОК2</div>
    <br/>
    <div class="helptip-mod">БЛОК3</div>
    <br/>

<script>
document.addEventListener("click",({target})=>{
	if (target.className != 'helptip-mod') return

	var resp='',rrp='';

	if(target.closest(".helptip-mod")){
		content=target.querySelector(".help_content"),
		otherСontent=document.querySelector(".helptip-mod .help_content");

		if(otherСontent&&otherСontent!=content)otherСontent.remove();

		if(content){
			content.remove();
			}else{
			var tt ='<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>';
			target.insertAdjacentHTML("beforeEnd",'<div class="help_content">'+tt+'<div class="close"></div></div>');
		}
	}

});
</script>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2021, 16:15
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

Ок, спасибо. А теперь при нажатии на .close блок не скрывается, подскажите, пожалуйста, как исправить
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2021, 16:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Андрей812
подскажите, пожалуйста, как исправить
Так при клике проверяй на чем именно кликали...
И действуй соответственно.
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2021, 16:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Андрей812
А теперь при нажатии на .close блок не скрывается
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.help_content {
background: green;
color: #fff;
}   
.close {
position: absolute;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
</style>
<script>
</script>
</head>
<body>

    <div class="helptip-mod">БЛОК</div>
    <br/>
    <div class="helptip-mod">БЛОК2</div>
    <br/>
    <div class="helptip-mod">БЛОК3</div>
    <br/>

<script>
document.addEventListener("click",({target})=>{
	if (['helptip-mod', 'close'].indexOf(target.className) < 0) return

	var resp='',rrp='';

	if(target.closest(".helptip-mod")){
		content=target.querySelector(".help_content"),
		otherСontent=document.querySelector(".helptip-mod .help_content");

		if(otherСontent&&otherСontent!=content)otherСontent.remove();

		if(content){
			content.remove();
			}else{
			var tt ='<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>';
			target.insertAdjacentHTML("beforeEnd",'<div class="help_content">'+tt+'<div class="close"></div></div>');
		}
	}

});
</script>


</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2021, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей812,
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        .help_content {
            position: relative;
            background: green;
            color: #fff;
        }

        .close {
            position: absolute;
            right: 22px;
            top: 2px;
            width: 12px;
            height: 32px;
            opacity: 0.3;
        }

        .close:hover {
            opacity: 1;
        }

        .close:before,
        .close:after {
            position: absolute;
            left: 15px;
            content: ' ';
            height: 33px;
            width: 2px;
            background-color: #333;
        }

        .close:before {
            transform: rotate(45deg);
        }

        .close:after {
            transform: rotate(-45deg);
        }
    </style>
    <script>
    </script>
</head>

<body>

    <div class="helptip-mod">БЛОК</div>
    <br />
    <div class="helptip-mod">БЛОК2</div>
    <br />
    <div class="helptip-mod">БЛОК3</div>
    <br />

    <script>
        document.addEventListener("click", ({ target }) => {
            let content = document.querySelector(".help_content"), mod;
            if (mod = target.closest(".helptip-mod")) {
                if (!mod.querySelector(".help_content")) {
                    if (content) content.remove();
                    let tt = '<ul><li>номер 1</li><li>номер 2</li><li>номер 3</li><li>номер 4</li></ul>';
                    mod.insertAdjacentHTML("beforeEnd", '<div class="help_content">' + tt + '<div class="close"></div></div>');
                }
                else if (target.closest(".close") || !target.closest(".help_content")) content.remove();
            } else if (content) content.remove();
        });
    </script>


</body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2021, 22:06
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

СПАСИБО! КРУТО!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JQuery При клике на кнопку Restore данные восстанавливаются Tanya51 Общие вопросы Javascript 13 02.08.2017 00:05
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 09:18
скрыть открыть тот или иной блок при клике на ссылке ufaclub jQuery 9 26.08.2014 00:14
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11