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

Question

我想做一个像mcmaster.com网站那样的侧边栏菜单。它允许您动态缩小产品范围并切换选项。正如您在图像中看到的，当选择“公制”选项时，所有页面都会根据基于公制的产品、侧边栏以及整个页面进行更改。有趣的是，URL 没有太大变化。我的意思是单击“度量”选项不会重新加载页面。 before clicking the "metric" option

after clicking the "metric" option

那么，我可以只用 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>