Question

我想制作像mcmaster.com网站这样的侧边栏菜单。它允许您动态缩小产品范围，并通过选项切换。正如您在图像中看到的那样，当选择“指标”选项时，所有页面都会根据基于指标的产品，侧边栏以及整个页面进行更改。有趣的是，URL没有太大变化。我的意思是单击“metric”选项不会重新加载页面。 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>

你如何创建一个“缩小”过滤菜单？

1 个答案: