Question

我将网页划分为两个垂直部分。左侧面板用于呈现书籍类别列表，右侧面板用于呈现与所选类别相关联的书籍。我们还有从左侧隐藏特定类别的按钮。

<div class="content">
  <div class='col-3'> 
    <h3> Category </h3>
    <div class="category-container dev-category-list">
    </div>
  </div>
  <div class='col-9'> 
    <h3> Books </h3>
    <div class="books-container dev-books-list">
    </div>
  </div>
</div>

Javascript代码：

var categories = ['category-1','category-2','category-3','category-4','category-5','category-6','category-7'];
var books = {'cat1':['1984','Dracula','Twilight','Holes','Homes','Uglies','Othello'],'cat2':['Dracula','Twilight','1984','Holes','Homes','Uglies','Othello'],'cat3':['1984','Twilight','Holes','Homes','Dracula','Uglies','Othello'],'cat4':['Othello','1984','Dracula','Uglies','Holes','Twilight','Eclipse'],'cat5':['Hamlet','Macbeth','Othello','Holes','Night','Twilight','Eclipse'],'cat6':['1984','Hamlet','Dracula','Uglies','Othello','Night','Twilight'],'cat7':['1984','Hamlet','Macbeth','Uglies','Othello','Holes','Night']};

setup_UI_elements();

function setup_UI_elements(){
  appendCategories();
  renderBooks('1');
  addCategListner();
  addBtnListner();
}

function appendCategories(){
    container = $('.dev-category-list');
   for(var i=0; i< categories.length; i++){
     categHtml = "<div data-categ-id='"+ (i+1) + "' class='categ'> "+categories[i]+" </div>";
     container.append(categHtml)
   }
}

function renderBooks(categ_id){
   container = $('.dev-books-list');
   container.html('');
   categ_key = 'cat'+categ_id
   $('.categ').removeClass('selected');
   $('div.categ[data-categ-id='+categ_id+']').addClass('selected');
   for(var i=0; i< books[categ_key].length; i++){
     bookHTML = "<div data-book-id='"+ (i+1) + "' class='book'> "+books[categ_key][i];
     bookHTML += "<button type='button' data-book-id='"+ (i+1) + "' data-categ-id='"+ (books[categ_key].length-i) + "' class='btn'> Hide Categ "+ (books[categ_key].length-i) +"</button> </div>";
     container.append(bookHTML);
   }
}

function addCategListner(){
  container = $('.dev-category-list');
  container.click(function(e){
    target = $(e.target);
    $('.categ').removeClass('selected hidden');
    target.toggleClass('selected');
    categ_id = target.data('categ-id');
    renderBooks(categ_id);      
  });
}

function addBtnListner(){
  container = $('.dev-books-list');
  container.click(function(e){
    target = $(e.target);
    if(target.hasClass('btn')){
      categ_id = target.data('categ-id');
      target.toggleClass('added');
      if(target.hasClass('added'))
        target.html('Show Categ'+categ_id)
      else
        target.html('Hide Categ'+categ_id)

        categDiv = $('.dev-category-list div[data-categ-id='+categ_id+']')
      categDiv.toggleClass('hidden');
    }
  });

}

当我尝试隐藏左侧面板中不再位于折叠上方的类别时，它会向右滚动而不是向左滚动面板。

我在Firefox和Safari中工作正常。

JS Bin：https://jsbin.com/bafasoy/edit?html,js,output

Chrome - 隐藏滚动的内容，导致正文和其他元素向上滚动

0 个答案: