Question

大家好，所以我正在为餐馆菜单构建一个简单的过滤器。我有三个菜单"menu1" "menu2" "menu3"我希望客户能够点击一个按钮，这将显示正确的菜单。但是由于某种原因，我似乎无法让它工作。

所以我希望它在开始时只显示"menu1"，所以我给了"menu2 & 3" display: none;，当用户点击按钮显示menu2 or 3时，它会显示正确的菜单，但我不能让这个工作：

HTML：

  <div class="container">
      <div class="row">
      <div class="categories">
        <ul class="cat">
          <li>
            <ol class="type">
              <li><a href="#" class="active" id="menu1">Menu1</a></li>
              <li><a href="#"  id="menu2">Menu2</a></li>
              <li><a href="#"  id="menu3">Menu3</a></li>
            </ol>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="menu-section targetDiv menu1">
          <h2 class="menu-section-title">FirstMenu</h2>
          <hr>
          <div class="menu-item">
            <div class="menu-item-name"> Delicious Dish </div>
            <div class="menu-item-price"> $35 </div>
            <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, duis sed dapibus leo nec ornare diam. </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
         <div class="menu-section targetDiv menu2">
          <h2 class="menu-section-title">SecondMenu</h2>
          <hr>
          <div class="menu-item">
            <div class="menu-item-name"> Delicious Dish </div>
            <div class="menu-item-price"> $45 </div>
            <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, duis sed dapibus leo nec ornare diam. </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-6">
         <div class="menu-section targetDiv menu3">
          <h2 class="menu-section-title">ThridMenu</h2>
          <hr>
          <div class="menu-item">
            <div class="menu-item-name"> Delicious Dish </div>
            <div class="menu-item-price"> $45 </div>
            <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, duis sed dapibus leo nec ornare diam. </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS：

.menu2 {
    display: none;
}

.menu3 {
    display: none;
}

JS：

jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('.div' + $(this).attr('target')).show();
  });
});

我试图用一个例子来使它工作，但我不知道我在做什么以及如何让它工作，对此问题的任何帮助都会很棒

谢谢

Answer 1

您需要在"li a"上添加事件处理程序并切换targetDiv s的可见性。

$( "li a[id]" ).click( function(){
  $( ".targetDiv" ).hide().filter( "." + this.id ).show();
})

<强>演示

$("li a[id]").click(function() {
  $(".targetDiv").hide().filter("." + this.id ).show();
})

.menu2 {
  display: none;
}

.menu3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="categories">
      <ul class="cat">
        <li>
          <ol class="type">
            <li><a href="#" class="active" id="menu1">Menu1</a></li>
            <li><a href="#" id="menu2">Menu2</a></li>
            <li><a href="#" id="menu3">Menu3</a></li>
          </ol>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="menu-section targetDiv menu1">
        <h2 class="menu-section-title">FirstMenu</h2>
        <hr>
        <div class="menu-item">
          <div class="menu-item-name"> Delicious Dish </div>
          <div class="menu-item-price"> $35 </div>
          <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, duis sed dapibus leo nec ornare diam. </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="menu-section targetDiv menu2">
        <h2 class="menu-section-title">SecondMenu</h2>
        <hr>
        <div class="menu-item">
          <div class="menu-item-name"> Delicious Dish </div>
          <div class="menu-item-price"> $45 </div>
          <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, duis sed dapibus leo nec ornare diam. </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="menu-section targetDiv menu3">
        <h2 class="menu-section-title">ThridMenu</h2>
        <hr>
        <div class="menu-item">
          <div class="menu-item-name"> Delicious Dish </div>
          <div class="menu-item-price"> $45 </div>
          <div class="menu-item-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, duis sed dapibus leo nec ornare diam. </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以更轻松地执行此操作，默认情况下，只需为menu / buttons隐藏所有菜单使用全局类。当您在按钮上click hide所有菜单时，只显示正确的菜单。

＆＃13;

$(".btn-menu").click(function(){
  var menuid = $(this).data("menuid");
  $(".menu").hide();
  $(".menu"+menuid).show();
})

＆＃13;

.menu{
display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-menu" data-menuid="1">Show menu 1</button>
<button class="btn-menu" data-menuid="2">Show menu 2</button>
<button class="btn-menu" data-menuid="3">Show menu 3</button>
<div class="menu menu1">Menu 1</div>
<div class="menu menu2">Menu 2</div>
<div class="menu menu3">Menu 3</div>

＆＃13;

让js过滤器用于显示菜单

2 个答案: