Question

我在页面上使用同位素。单击某个项目时，该项目会添加一个类并扩展大小。您可以在Isotopes demo page上看到我的意思。（点击和元素查看。）

我的内容会在大视图中显示。在大视图中，我有一个按钮，允许一个人查看该项目，然后打开一个灯箱。问题是当单击按钮时元素返回到小状态。如果单击按钮，如何防止这种情况发生？

换句话说，如果单击该项，则返回较小的状态。如果单击查看按钮，则保持较大。

的 HTML 的

<div class="element indica" data-category="indica">
  <p class="type">I</p>
  <h2 class="name">Name</h2>
  <p class="strain-info">Information Here</p>
<!-- WHEN BUTTON BELOW IS CLICK DO NOT RESIZE ELEMENT -->
  <p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox"><span style="background-color: #000;">Review Strain</span></a></p>
</div>

的 JS 的

var $j = jQuery.noConflict();

$j(function(){

var $jcontainer = $j('#container');

//Isotope Code

//JS controling only the resizing of an element
  $jcontainer.delegate( '.element', 'click', function(){
    $j(this).toggleClass('large');
    $jcontainer.isotope('reLayout');
  });
});

修改的

根据Aslam Khan的答案，我尝试了以下代码：

<p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox" onclick="javascript:void(0);"><span style="background-color: #000;">Review Strain</span></a></p>

我在onclick="javascript:void(0);标记中添加了<a>。

Answer 1

您可以在javascript函数中使用e.stopPropagation();。

如果你想从html中阻止它使用onclick="javascript:void(0);"

Answer 2

虽然我知道必须有一个更好的方法，我添加了以下代码，它似乎工作：

注意：我使用的是Colorbox Lightbox和jQuery.noConflict(); $j

$j(".review-form-lb").colorbox({onOpen:function(){
   var clickeddiv = $j(this).closest('div');
   $j(clickeddiv).addClass("large");
   $jcontainer.isotope('reLayout');
}});

单击按钮时阻止JS动作发生

2 个答案: