Как вернуть ссылкам функционал после return false?

145
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

READ ALSO
Append к классу
jQuery

Append к классу

Не применяетсяappend для классов

 154
Определить нужный класс и заменить его
jQuery

Определить нужный класс и заменить его

В общем есть блок, который имеет два класса, допустим выглядит так:

 103
Аккордеоны в slick slider
jQuery

Аккордеоны в slick slider

Хоть и в настройках есть adaptiveHeight, но не работает со скрытым контентомПри клике он просто не отображается, но после возврата с другого слайда...

 122
Булевая формула в метод [закрыт]
c#

Булевая формула в метод [закрыт]

Нужно засунуть в метод булевую формулу, чтобы рекурсивно проверять ее истинностьКак это можно реализовать?(Формула задается пользователем)

 130