0

ページでアイソトープを使用しています。アイテムをクリックすると、アイテムにクラスが追加され、サイズが拡大されます。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's Answer に従って、次のコードを試しましたが、うまくいきませんでした:

<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

より良い方法が必要であることはわかっていますが、次のコードを追加したところ、うまくいくようです。

注: 私は 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');
}});
于 2013-07-23T04:40:43.120 に答える