0

2 つの UL の非表示と表示について頭を悩ませようとしています。製品仕様表を作成しようとしています。これを完了するための助けを得ることができれば、それは遅く、私はこれに1、2時間苦労しています..

ここで実際の例を見ることができます: http://saeledlights.com/products/led-light-bars/high-performance-single-row/

製品仕様表の外観:

ここに画像の説明を入力

シナリオ：

ユーザーが製品ページにアクセスすると、最初のトグルが常に表示されます。2 番目、3 番目、4 番目のトグルをクリックする<ul>と、他のすべてのトグルが変更されて非表示になります。ボタンの<ul>最後に -toggle があることを除いて、 と トグル ボタンのクラス名は一致しています。

html は次のとおりです。

<div class="single-product row">
  <div class="grid_3 alpha">
    <img src="http://example.com/wp-content/uploads/2012/12/SW12231_thumbnail.png" alt="SW12231_thumbnail" width="200" height="200" class="alignnone product-image size-full wp-image-151" />
  </div>
  <div class="grid_9 product-specs-container omega">
    <ul class="product-specs first">
      <li><strong>MODEL:</strong>SW12231-6F</li>
      <li><strong>WATTS:</strong>24W</li>
      <li><strong>TYPE:</strong>FLOOD</li>
      <li><strong>LED's:</strong>6 x 5W Cree</li>
      <li><strong>AMP DRAW 12V/24V:</strong>1.65/0.93</li>
      <li><strong>RAW LUMENS:</strong>2250</li>
      <li><strong>IP RATING:</strong>68</li>
      <li><strong>BEAM DISTANCE:</strong>1083'</li>
      <li><strong>PEAK BEAM INTENSITY (cd):</strong>22400</li>
      <li><strong>SIZE:</strong>7.38 x 1.6 x 3.3</li>
      <li><strong>VOLTAGE:</strong>9V-30V</li>
    </ul>
    <ul class="product-specs second">
      <li><strong>MODEL:</strong>1234124412231-6F</li>
      <li><strong>WATTS:</strong>12341244W</li>
      <li><strong>TYPE:</strong>12341244OOD</li>
      <li><strong>LED's:</strong>12341244x 5W Cree</li>
      <li><strong>AMP DRAW 12V/24V:</strong>1234124465/0.93</li>
      <li><strong>RAW LUMENS:</strong>1234124450</li>
      <li><strong>IP RATING:</strong>12341244</li>
      <li><strong>BEAM DISTANCE:</strong>1234124483'</li>
      <li><strong>PEAK BEAM INTENSITY (cd):</strong>12341244400</li>
      <li><strong>SIZE:</strong>1234124438 x 1.6 x 3.3</li>
      <li><strong>VOLTAGE:</strong>12341244-30V</li>
    </ul>
    <div class="grid_9 alpha omega">
      <div class="product-thumbnail"><a href="#" class="first-toggle">SPOT</a></div><div class="product-thumbnail"><a href="#" class="second-toggle">FLOOD</a></div>
    </div>
  </div>
</div>

私がこれまでに持っているJquery。

$('.first-toggle').toggle(function(){
    var first   = $(this).closest('.single-product').children('.product-specs-container').children('.first');
    var second  = $(this).closest('.single-product').children('.product-specs-container').children('.second');
    second.removeClass('hidden current').addClass('hidden');
    first.removeClass('hidden current').addClass('current');
}, function(){
    second.removeClass('hidden current').addClass('hidden');
    first.removeClass('hidden current').addClass('current');
});
4

3 に答える 3

1

これを参照してください： http://jsfiddle.net/czSU8/2/

$(" ul.second").addClass('hidden');

  $('.first-toggle').click(function(){
  var first   = $(this).closest('.single-product').children('.product-specs-container').children('.first');
  var second  = $(this).closest('.single-product').children('.product-specs-container').children('.second');
  second.removeClass('hidden current').addClass('hidden');
  first.removeClass('hidden current').addClass('current');
  event.preventDefault();
});

$('.second-toggle').click(function(){
   var first   = $(this).closest('.single-product').children('.product-specs-container').children('.first');
  var second  = $(this).closest('.single-product').children('.product-specs-container').children('.second');
  first.removeClass('hidden current').addClass('hidden');
  second.removeClass('hidden current').addClass('current');
  event.preventDefault();
});

注: toggle() は、jQuery 1.9 以降では非推奨です。

于 2013-02-20T06:09:11.470 に答える
0 
$(" ul.second").addClass('hidden');
$('a.first-toggle').click(function(){
      $('ul.second').toggle();
      $('ul.first').toggle();         
};


$('a.second-toggle').click(function(){
      $('ul.second').toggle();
      $('ul.first').toggle();         
};

http://api.jquery.com/toggle/を参照

于 2013-02-20T05:33:37.060 に答える
0

あなたはそれをすべて間違っています..

トグル関数に2つのコールバックを含めることはできません....注：トグルはjquery 1.9（私の知る限り）の時点で非推奨です...

だから私が理解したことから..私はあなたが見ることができるようにこのフィドルを作成しました

hide()とを使用slideDown()してトグル効果を与えました...

ここにコードがあります..

html

<div class="product-thumbnail"><a href="#" class="first">SPOT</a></div> // removed -toggle
<div class="product-thumbnail"><a href="#" class="second">FLOOD</a></div> // removed -toggle

jquery

 $('ul').not('.first').hide();  <-- hide all ul expect first here
 $('div.product-thumbnail a').click(function(){  //call click function in buttons
    var classname=$(this).attr('class'); // get the clicked button class..i removed `-toggle` here so that i can handle this with one function
   $('ul').hide(); // hide all ui first 
   $('ul.'+classname).slideDown(); //slidedown the one you clicked 
});

注：これは、ボタンを作成する必要があり、ボタンのクラスがのクラス<ui>とまったく同じである必要があるというだけで、複数の場合に機能します<ui>

于 2013-02-20T06:02:06.157 に答える