0

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

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

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

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>标签中。

4

2 回答 2

1

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

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

于 2013-07-23T04:08:52.047 回答
0

虽然我知道必须有更好的方法，但我添加了以下代码并且它似乎有效：

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

$j(".review-form-lb").colorbox({onOpen:function(){
   var clickeddiv = $j(this).closest('div');
   $j(clickeddiv).addClass("large");
   $jcontainer.isotope('reLayout');
}});
于 2013-07-23T04:40:43.120 回答