0

アコーディオンメニュー（以下のコード）を取得し、アコーディオンメニューの下にタグボックスがあります。アコーディオンメニューが拡張されるとき、拡張メニューがタグボックスを覆うのではなく、タグボックスを拡張メニューの下に配置したいと思います。そのため、開いているサブアイテムの数を数えた後、タグボックスのCSSプロパティ「top」の値を変更します。

<div id="accordion"> 
  <h3>NOTEBOOKS</h3>

  <div class="sub_items" style="padding-top:0px;padding-bottom:0px;">
    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)">
      <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/black-slim.html">  
      <span>BLACK SLIM</span></a>
    </div>
    
    <div onMouseOver="bgFadeIn(this)" onMouseOut="bgFadeOut(this)">
      <a href="http://127.0.0.1/casecrown_final/index.php/notebooks/checkered-slim.html"> 
         <span>CHECKERED SLIM</span></a>
    </div>
  </div>

  <h3>Another item</h3>
  <div class=sub_items" ......
.......
.....
</div>

jQuery(document).ready(function() {
        
   var countTotalCategories = jQuery('#accordion > h3').size();
   var defaultHeight = countTotalCategories * 30;

   jQuery('#accordion> div').hide();  
    
   jQuery('#accordion> h3').click(function() {
      jQuery(this).next('div').slideToggle(400)
      .siblings('div:visible').slideUp(400);

      countProducts = jQuery(this).next('div').children('div:visible').size();
      var calculatedHeight= defaultHeight + 29 * countProducts;
            
      jQuery('.mini-product-tags').css('top' , calculatedHeight + 'px');
});

さて、ユーザーがそれを拡張するために新しいメニューを開いているのか、それともユーザーがメニューを閉じているのかをどうやって知ることができますか。ユーザーがメニューを閉じているかどうかを判断する方法がわからないため、すべてのアコーディオンメニューを閉じたときにタグボックスの値をデフォルトに設定できます。クリックイベントの後で、jQueryトグルイベントがいつ処理されているのかわからないことがわかったようです。

4

2 に答える 2

0

それはそれを行うための最も美しい方法ではないかもしれませんが、あなたの次の要素<h3>（つまりあなたの実際のアコーディオンコンテナ<div>タグ）が持っているかどうかを調べてみdisplay: noneませんか？

コンテナが表示されている場合、クリックイベントはコンテナを閉じることです。コンテナが表示されていない場合、クリックイベントはコンテナを開きます。

それで：

$(function() {

   ...

   $('#accordion> h3').click(function() {
      if ($(this).next('div').css("display") == "none")
      {
        // My accordion pane is closed
      }
      $(this).next('div').slideToggle(400)
      .siblings('div:visible').slideUp(400);
      ...
于 2009-08-13T00:58:52.197 に答える
0

同意します。可視性を確認する必要があります。別のマークアップの使用も検討します。

これが実際の例です

jquery:

// hide all that are not active
$("dd:not(#active)").hide(); 

// when the link is clicked (could make this an h3 if you wanted)
$("dt a").click(function(){ 
    // slide up the visible siblings
    $(this).parent().next().siblings("dd:visible").slideUp("fast"); 
    // slide down the next parent
    $(this).parent().next().slideDown("fast"); 
    // remove the class of current from any other dt a
    $(".current").removeClass("current"); 
    // add the class of current to the anchor tag
    $(this).addClass("current"); 
    return false; 
});

html:

<dl> 
<dt><a href="#">SOME ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li> 
  <li>Something</li>           
</ul> 
</dd> 

<dt><a href="#">OTHER ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li> 
  <li>Other thing</li>           
</ul> 
</dd> 

<dt><a href="#">ZOMG, MORE ITEMS!</a></dt> 
<dd> 
<ul> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li> 
  <li>MORE things</li>           
</ul> 
</dd>
于 2009-08-13T03:09:45.500 に答える