Question

我是html / css的新手，并且无法找到制作我想要的元素的方法。我开始说我在轨道项目中使用Material Design Lite。

所以我想做的是我有一个搜索结果网格，我试图创建一个过滤条，用户可以选择不同的标签和特征来过滤结果。用于过滤结果的html和表单部分我可以处理我无法搞清楚的部分是我想要布局的方式......

我尝试在不同类别的顶部创建一个栏，当用户点击其中一个类别时，一个框会展开，并显示该类别的所有不同过滤选项。类似于菜单下拉菜单但希望将其作为组的一部分，因此如果他们选择另一个类别，它将关闭第一个类别并打开新的类别。

我正在寻找正确的方向，找到一个能让我朝着正确方向前进的教程或示例。对于我认为食谱网站yummly使用这种系统的视觉参考...继承人屏幕截图：

Answer 1

使用jQuery，您可以为每个组中与ID对应的顶部导航链接添加属性，然后使用该属性定位正确的选项卡，并使用.siblings（）淡出其余部分

HTML

<div id="topbar">
    <a href="#" class="toggle" data-group="#category1">link</a>
    <a href="#" class="toggle" data-group="#category2">link</a>
</div>
<div id="groups">
    <div class="sub" id="category1">
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
    </div>
    <div class="sub" id="category2">
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
        <a href="#filter">filter</a>
    </div>
</div>

的jQuery

$(document).ready(function(){
    $(".sub, .close").hide(); // hides filter tabs and close button
    $('#topbar a.toggle').click(function(){ // on click
        var category = $(this).attr("data-group"); // checks the ID to fade in
        $(".sub" + category).fadeIn().siblings(".sub").hide(); // fades in the correct subcategory and fades out all the other categories
        $(".close").fadeIn(); // fades in close button
        return false; // prevents anchor link behaviour
    });
    $("#topbar a.close").click(function(){ // close button click
        $(".sub").fadeOut(); // fades out whatever subcategory is active
        $(this).fadeOut(); // fades out close button
        return false; // prevents anchor link behaviour
    });
});

jsFiddle：https://jsfiddle.net/4t6k2ftd/

Answer 2

您可以使用标签执行此操作。有很多教程。在你的情况下，成分，味道，饮食（链接）可以是标签。对于每个标签，您都有标签内容。例如“饮食标签”（标签）的“饮食过滤选项”（内容）。当您点击“饮食选项卡”时，“饮食过滤选项”（内容）变得可见，并添加了一些CSS。这是tutorial。

示例标签html

<ul class='tabs'>
  <li><a href='#ingredients'>Ingredients</a></li>
  <li><a href='#tastes'>Tastes</a></li>
  <li><a href='#diet'>Diet</a></li>
</ul>
<div id='ingredients'>
  Ingredients filter options
</div>
<div id='tastes'>
  tastes filter options
</div>
<div id='diet'>
  diet filter options
</div>

示例选项卡javascript（jquery）

$('ul.tabs').each(function(){
  // For each set of tabs, we want to keep track of
  // which tab is active and its associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');

  $content = $($active[0].hash);

  // Hide the remaining content
  $links.not($active).each(function () {
    $(this.hash).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = $(this);
    $content = $(this.hash);

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
  });
});

此处active是当前活动链接的类。

如何制作自定义下拉菜单

2 个答案: