时间戳

首页 > 解决方案 > 从链接打开模式而不触发父 javascript

javascript - 从链接打开模式而不触发父 javascript

问题描述

我有一个包装布局，其中每个 div 在单击时展开，显示隐藏的内容，包括链接。当您单击链接时，会打开一个模式，但此时这也会触发打包布局并折叠父 div。

我希望发生以下情况：

  1. 点击 div
  2. 展开 div 显示链接
  3. 单击链接显示模式，但不折叠父 div
  4. 关闭模式，仍然没有折叠父 div

我试过 stopPropagation 但它也禁用了模式。我还尝试将触发 div (.expand) 扩展的类移动到另一个元素，但这破坏了我的包装布局的结构/顺序。

JS在这里：

$(document).ready(function(){
var $grid = $('.grid').packery({
      itemSelector: '.grid-item',
  });

  $grid.on( 'click', '.expand', function( event ) {
        $(  event.currentTarget  ).toggleClass('grid-item--large');
        $grid.packery('layout');
        $(this).children('.hiddenInfo').toggle();
  });

});

& 一个名为 jquery-modal 的插件：https ://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js

这是一段 HTML：

  <div class="container">
    <div class="grid">
      <div class="grid-item">
        <div class="grid-item-content expand">
          <div class="hiddenInfo">
            <a href="#openModalLink" rel="modal:open"><img src="img/thumb.jpg"/></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="openModalLink" class="modal">
    <p>Some content in the modal</p>
  </div>

CSS：

.container {
  padding: 50px 0 30px 0;
  display: block;
  width: 98vw;
}

.grid {
  width: 100%;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.hiddenInfo {
  display: none;
}

.expand {
  display: block;
  z-index: 999;
  width: 150px;
  height: 150px;
  background: #ffffff;
}

.expand:hover {
  cursor: pointer;
}

.grid-item-content {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

.grid-item {
  float: left;
  padding: 4px;
}

.grid-item--large {
  width: 520px;
  height: 375px !important;
  border-radius: 0 !important;
  background-color: #ffffff;
}

任何帮助将不胜感激，我真的被困住了。

谢谢你。

标签： javascriptjquerymodal-dialogpackery

解决方案

推荐阅读