如何制作自定义下拉菜单

Question

我对 html/css 非常陌生，并且很难找到一种方法来制作我想要的元素。首先说我在 Rails 项目中使用 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 是当前活动链接的类。