0

Tiny Scrollbarというカスタム スクロールバー プラグインを使用しています。スクロールバーの内側には、アコーディオン タイプのナビゲーションがあります。

私の問題は、ナビゲーションの高さが変更されたときにスクロールバーが更新されないことです。クリックするたびに何らかの形式の ajax が更新されるのではないかと考えていますが、ajax の経験がないのでわかりません。これはナビゲーションのコードです。

<div id="nav-container">
  <div class="scrollbar">
    <div class="track">
      <div class="thumb">
        <div class="end"></div>
      </div>
    </div>
  </div>
<div class="viewport">
  <div class="overview">
    <nav class="main">

    <div class="menu-item">
      <h4><a href="#">Inledning</a></h4>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
    </div>

    </nav>
  </div>
</div>
</div>

jQuery:

$(document).ready(function() {
var $ul = $('ul');

$( "h4" ).click(function() {
  $( "h4" ).removeClass( "menu-selected" );
  $ul.hide( "blind", 1000 );
$(this).toggleClass( "menu-selected" );
  $(this).next().show( "blind", 1000 );
});

$( "li" ).click(function() {
  $( "li" ).removeClass( "select" );
    $(this).addClass( "select" );
  });
});
4

1 に答える 1

1

Tiny Scrollbar の Web サイトでは、新しいコンテンツが追加されたら、保持コンテナーを更新する必要があると書かれています。例えば

//The update method can be used for adjusting a scrollbar to its new content.
var yourScrollBar = $('nav-container');
yourScrollBar.tinyscrollbar();

//The below function would be called when updating the content. 
yourScrollBar.tinyscrollbar_update();

上記のコードは、プラグイン Web サイトの例です。

たとえば、コードを使用します。

$( "h4" ).click(function() {
  $( "h4" ).removeClass( "menu-selected" );
  $ul.hide( "blind", 1000 );
  $(this).toggleClass( "menu-selected" );
  $(this).next().show( "blind", 1000 );
  yourScrollBar.tinyscrollbar_update(); <-------- Here. 
});
于 2013-02-02T19:47:08.343 に答える