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 网站上，它说当添加新内容时，您需要更新容器。例如

//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();

上面的代码是来自插件网站的示例。

例如使用您的代码。

$( "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 回答