Question

我正在使用使用Mootools JS的CMS构建的市场类型网站上工作，我想让用户可以选择从项目列表视图更改为网格视图。

我的问题是在加载屏幕时看到列表和网格视图，只有一个按钮被点击时消失，所以这是我需要帮助的地方。我希望列表视图显示在页面加载上，网格视图显示在按钮上单击

我已经对此进行了大量的研究，虽然那里有大量的JQuery答案，但对于Mootools来说并没有多少答案，我发现使用CSS的唯一答案就是建议使用CSS＆＃39;显示：无＆＃39;在其中一个列表元素上，它根本不起作用。

中查看我的问题的基本概念

这是我的HTML

<button id="list">list</button>
<button id="grid">grid</button>

<ul id="ulGrid">
  <li>Grid 1</li>
  <li>Grid 2</li>
  <li>Grid 3</li>
  <li>Grid 4</li>
  <li>Grid 5</li>
</ul>
<ul id="ulList">
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

CSS

#ulGrid {
  color: #8A7575;
  font-weight: bold;
  padding: 10px;
  background: #ccc;
  width: 15%;
}

#ulList {
  color: #8A7575;
  padding: 10px;
  font-weight: bold;
}

JS

window.addEvent('domready', function () {

  var myList = new Fx.Slide('ulList');
  var myGrid = new Fx.Slide('ulGrid');

  $('list').addEvent('click', function (event) {
    myGrid.hide();
    myList.show();
  });

  $('grid').addEvent('click', function (event) {
    myGrid.show();
    myList.hide();
  });

});

非常感谢提前

Answer 1

如此。尝试从ID和粗/粗逻辑中解耦。

var grids = document.getElements('.grid > ul');    
document.getElements('.grid button.toggler').addEvent('click', function(){
    grids.toggleClass('hide');
    this.set('text', grids.match('#ulGrid.hide')[0] ? 'grid' : 'list');
});

标记为：

<div class="grid">
    <button class="toggler">grid</button>    
    <ul id="ulGrid" class="hide">
        <li>Grid 1</li>
        <li>Grid 2</li>
        <li>Grid 3</li>
        <li>Grid 4</li>
        <li>Grid 5</li>
    </ul>
    <ul id="ulList">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
    </ul>
</div>

和CSS：

.hide {
    display: none;
}

#ulGrid {
    color: #8A7575;
    font-weight: bold;
    padding: 10px;
    background: #ccc;
    width: 15%;
}

#ulList {
    color: #8A7575;
    padding: 10px;
    font-weight: bold;
}

会正常工作。 http://jsfiddle.net/dimitar/5ctJL/6/

回答关于图标的其他问题，这是通过font-awesome的东西。 http://jsfiddle.net/5ctJL/9/

执行相同的操作但将类设置为正确的图标。请参阅http://fortawesome.github.io/Font-Awesome/icons/了解选项，我选择了两个看起来像网格和列表。

var grids = document.getElements('.grid > ul');    
document.getElements('.grid button').addEvent('click', function(){
    grids.toggleClass('hide');
    this.set('class', this.hasClass('fa-list') ? 'fa fa-th' : 'fa fa-list');
});

nb：请记住图标版本我对标记做了一些细微的更改，以避免将className设置为切换器并在CSS中设置了带有命名空间的按钮 - 它是概念证明，不要掉进：）

说实话，我可以用纯CSS解决整个问题（包括点击） - 如果你不需要支持IE8

使用mootools列表到网格视图

1 个答案: