Как вернуть ссылкам функционал после return false?
126
12 июня 2019, 11:20
Такая структура:
<li class="flash">
<div class="diler-item">
<div class="diler-close"></div>
<div class="diler-row">
<h4>Заголовок</h4>
<p>Текст</p>
<a href="http://сайт.ру">Ссылка на сайт</a>
</div>
</div>
</li>
И ей сделан вот такой код js.
$(function(){
var titles = $('.flash'),
close = $('.diler-close');
titles.on('click',function(e){
$(this).prevAll('.flash').removeClass('open');
$(this).nextAll('.flash').removeClass('open');
$(this).toggleClass('open');
}).children().click(function(e) {
return false;
});
close.on('click',function(){
$(this).parent().parent().removeClass('open');
});
});
Здесь по нажатию на .flash всплывает его дочерний элемент .diler-item с информацией. Закрываются другие похожие окна. Сделано по принципу аккордеона. Return false для .children был добавлен, чтобы клик по .diler-item не закрывал это окно.
Все работало так, как надо, пока во всплывающем окне не была добавлена ссылка - клик по ней не срабатывает.
- Пробовал как-то исключить ее из .children - не получилось;
- без return false работает ссылка, но срабатывает клик по нажатию на самом .diler-item (всплывающем окне) и его элементах;
Пример на jsfiddle: Здесь
Подскажите, пожалуйста, как доработать код, чтобы и ссылки работали и весь этот вроде не сложный функционал оставался...
Answer 1
Из кода в ответе не переходит по ссылке. Поэтому вот: https://codepen.io/Lukyanenko/pen/ZVbYNQ
$(function(){
var contents = $('.diler-item'),
titles = $('.flash'),
close = $('.diler-close');
titles.on('click',function(e){
if ($(e.target).hasClass('flash')) {
$(this).prevAll('.flash').removeClass('open');
$(this).nextAll('.flash').removeClass('open');
$(this).toggleClass('open');
}
})
close.on('click',function(){
$(this).parent().parent().removeClass('open');
});
});body {
background: #1e202c;
}
.diler-map .container {
padding: 150px 150px; }
.diler-map .container h2 {
font-size: 2.5em;
margin: 0 0 60px; }
.diler-map .container .map {
position: relative;
height: 400px;}
.diler-map .container .map img {
width: 100%; }
.diler-map .container .map .dilers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none; }
.diler-map .container .map .dilers .flash {
position: absolute;
cursor: pointer;
width: 15px;
height: 15px;
-webkit-border-radius: 100%;
border-radius: 100%;
z-index: 5;
background: #fff;}
.diler-map .container .map .dilers .flash:nth-child(2) {
top: 200px;
}
.diler-map .container .map .dilers .flash:nth-child(3) {
top: 400px;
}
.diler-map .container .map .dilers .flash:before {
position: absolute;
top: 50%;
left: 50%;
margin: -2.5px 0 0 -2.5px;
width: 5px;
height: 5px;
content: "";
-webkit-border-radius: 100%;
border-radius: 100%;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;}
.diler-map .container .map .dilers .flash .diler-item {
position: absolute;
left: 100%;
top: 50%;
margin: -150px 0 0 30px;
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(110, 117, 135, 0.5)), color-stop(81%, rgba(30, 32, 44, 0.9)));
background: -webkit-linear-gradient(top, rgba(110, 117, 135, 0.5) 0%, rgba(30, 32, 44, 0.9) 81%);
background: -o-linear-gradient(top, rgba(110, 117, 135, 0.5) 0%, rgba(30, 32, 44, 0.9) 81%);
background: linear-gradient(to bottom, rgba(110, 117, 135, 0.5) 0%, rgba(30, 32, 44, 0.9) 81%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e7587', endColorstr='#1e202c', GradientType=0 );
-webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.5);
padding: 20px;
width: 300px;
height: 300px;
overflow-y: auto;
cursor: initial;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 10; }
.diler-map .container .map .dilers .flash .diler-item h3 {
margin: 0 0 15px;
font-family: "PobedaRegular", "Arial", "Lucida Grande", sans-serif;
font-size: 2em;
font-weight: normal; }
.diler-map .container .map .dilers .flash .diler-item .diler-row h4 {
margin: 20px 0 15px;
font-weight: 600; }
.diler-map .container .map .dilers .flash .diler-item .diler-row p {
margin: 10px 0; }
.diler-map .container .map .dilers .flash .diler-item .diler-row a {
color: #fff; }
.diler-map .container .map .dilers .flash .diler-item .diler-row a.sertificate:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 3px 0 #fff;
box-shadow: 0 0 3px 0 #fff;
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.diler-map .container .map .dilers .flash .diler-item .diler-row a.sertificate:hover:before {
background-color: rgba(255, 255, 255, 0.7);
-webkit-box-shadow: 0 0 10px 0 #fff;
box-shadow: 0 0 10px 0 #fff;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.diler-map .container .map .dilers .flash .diler-item .diler-close {
position: absolute;
width: 25px;
height: 25px;
top: 30px;
right: 10px;
cursor: pointer; }
.diler-map .container .map .dilers .flash .diler-item .diler-close svg {
fill: #dedede;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease; }
.diler-map .container .map .dilers .flash .diler-item .diler-close svg:hover {
fill: #fff; }
.diler-map .container .map .dilers .flash .diler-item.several .diler-row {
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.diler-map .container .map .dilers .flash .diler-item.several .diler-row:last-child {
border-bottom: none; }
.diler-map .container .map .dilers .flash.open {
z-index: 12; }
.diler-map .container .map .dilers .flash.open:before {
background-color: #fff;
-webkit-box-shadow: 0 0 40px 10px #bac2d6;
box-shadow: 0 0 40px 10px #bac2d6; }
.diler-map .container .map .dilers .flash.open .diler-item {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.diler-map .container .map .dilers .flash ::-webkit-scrollbar {
background: rgba(110, 117, 135, 0.5);
width: 5px; }
.diler-map .container .map .dilers .flash ::-webkit-scrollbar-thumb {
background: #6e7587; }
.diler-map .container .main-btn.diler-btn {
display: block;
width: 240px;
height: 65px;
line-height: 65px;
padding: 0;
text-transform: uppercase;
margin: 60px auto 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="diler-map">
<div class="container">
<div class="map">
<ul class="dilers">
<li class="flash">
<div class="diler-item">
<div class="diler-close">
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path></svg>
</div>
<div class="diler-row">
<h4>Заголовок</h4>
<p>Текст</p>
<a href="http://google.com" target="_blank">Перейти на сайт</a>
</div>
</div>
</li>
<li class="flash">
<div class="diler-item">
<div class="diler-close">
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path></svg>
</div>
<div class="diler-row">
<h4>Заголовок</h4>
<p>Текст</p>
<a href="http://google.com" target="_blank">Перейти на сайт</a>
</div>
</div>
</li>
<li class="flash">
<div class="diler-item">
<div class="diler-close">
<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path></svg>
</div>
<div class="diler-row">
<h4>Заголовок</h4>
<p>Текст</p>
<a href="http://google.com" target="_blank">Перейти на сайт</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>Answer 2
Попробуйте так:
$(function(){
var titles = $('.flash'),
close = $('.diler-close');
$(function(){
var contents = $('.diler-item'),
titles = $('.flash'),
close = $('.diler-close');
titles.on('click',function(e){
$(this).prevAll('.flash').removeClass('open');
$(this).nextAll('.flash').removeClass('open');
$(this).toggleClass('open');
}).find('*:not(svg)').click(function(e) {
if(!$(this).is('a')) {
return false;
} else {
e.stopPropagation();
}
});
close.on('click',function(){
$(this).parent().parent().removeClass('open');
});
});
});
jsfiddle
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46717 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30299 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22870 visits
- Как через css изменить цвет png изображения? 10171 visits
- Blob video url download 9805 visits
- Php curl запрос через прокси с авторизацией 9063 visits
- Работа с captcha vk api 7981 visits
© "hostciti.net" 01.5.2024 | 14:31