如何创建"narrow by"过滤菜单？

Question

我想做一个像 mcmaster.com 网站的侧边栏菜单。它允许您动态缩小产品范围并在选项之间切换。正如您在图像中看到的，当选择"指标"选项时，所有页面都会根据基于指标的产品，侧边栏以及整个页面进行更改。有趣的是，URL没有太大变化。我的意思是页面不是通过单击"指标"选项重新加载的。在单击"指标"选项之前

点击"指标"选项后

那么，我可以只用html，css和Javascript来拥有这样的东西吗？

Answer 1

这个问题太宽泛了。您实际上需要提出代码，然后将其发布在这里，以便得到社区的帮助。

据我所知，他们使用Ajax来根据过滤器选项更新页面内容。

一个简单的过滤形式是，如果页面中已经显示了一些项目，然后根据过滤器，将显示一些项目，而隐藏其他项目。

下面是一个简单的例子。蓝色是公制，绿色是英寸。此外，如果您单击清除，您将清除过滤。这是您可以创建的最简单的筛选器。

$(".filter span").click(function(){
  
  $(".filter span").removeClass("selected");
  
  $(this).toggleClass("selected");
  
  var theClass = $(this).attr("class");
  theClass = theClass.replace(" selected","");
  
  if ( theClass === "metric" ) {
    $(".items .inch").hide();
    $(".items .metric").show();
    } else if ( theClass === "inch" ){
      $(".items .inch").show();
      $(".items .metric").hide();
      
      } else {
        $(".item").show();
        $(".filter span").removeClass("selected");
        }
  
  });

.filter {
  width: 100%;
  display: block;
  float: left:
  }
.items {
  width: 100%;
  display: block;
  float: left;
  }
.item {
  display: block;
  float: left;
  width: 10%;
  margin-right: 10px;
  margin-bottom: 10px;
  border: solid 1px #ccc;
  padding: 10px;
  text-align: center;
  }
.items .inch {
  background: #0f0;
  }
.items .metric {
  background: #00f;
  }
.filter span:hover {
  cursor: pointer;
  font-weight: 900;
  padding: 2px;
  border: solid 1px #000;
  }
.selected {
    font-weight: 900;
  padding: 2px;
  border: solid 1px #000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
  Choose: <span class="metric">metric</span> <span class="inch">inch</span><span class="clear"> clear</span>
  </div>
<ul class="items">
  
  <div class="item metric">1. metric</div>
  <div class="item inch">2. inch</div>
  <div class="item metric">3. metric</div>
  <div class="item metric">4. metric</div>
  <div class="item inch">5. inch</div>
  <div class="item metric">6. metric</div>
  <div class="item metric">7. metric</div>
  <div class="item inch">8. inch</div>
  <div class="item metric">9. metric</div>
  
  
  
  
  </ul>