实现下拉菜单无法在卡内工作 [英] Materialize dropdown no working inside a card

问题描述

我正在尝试在卡中使用MaterializeCSS下拉菜单，但是单击按钮时没有任何反应.

我已经准备了一个jsfiddle，其中包含文档中的示例以及我可以在stackoverflow和google上找到的所有答案，但是我仍然无法使其正常工作.我在做什么错了?

https://jsfiddle.net/mozfet/3k4dkk6s/

html

<div class="row">
  <div class="col s12">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>

        <!-- Dropdown Trigger -->
        <a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a>

        <!-- Dropdown Structure -->
        <ul id='dropdown1' class='dropdown-content'>
          <li><a href="#!">one</a></li>
          <li><a href="#!">two</a></li>
          <li class="divider"></li>
          <li><a href="#!">three</a></li>
        </ul>
      </div>
    </div>    
  </div>
</div>

js

$(document).ready(function() {
  console.log("intiate dropdown");
  $('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false,
    hover: true,
    gutter: 0,
    belowOrigin: false,
    alignment: 'left'
  });
});

css

.card {
  overflow: visible !important;
};

解决方案

存在一个带有下拉菜单的错误，并在具体实现0.97.2和0.97.3中进行选择；有关更多信息，请参见 https://github.com/Dogfalo/materialize/issues/2265 和 https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .. >

我在Meteor中使用了Material版本CSS的Sass版本，并通过在Meteor软件包文件中使用 poetic:materialize-scss@1.97.1 解决了该问题，以强制使用旧版本.下拉列表现在可以使用了，旧的jQuery都可以使用！

I'm trying to get a MaterializeCSS dropdown menu working inside a card, but nothing is happening when I click on the button.

I've prepared a jsfiddle with the examples from the documentation and all the answers I could find on stackoverflow and google, yet I still cannot get it to work. What am I doing wrong?

https://jsfiddle.net/mozfet/3k4dkk6s/

html

<div class="row">
  <div class="col s12">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>

        <!-- Dropdown Trigger -->
        <a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a>

        <!-- Dropdown Structure -->
        <ul id='dropdown1' class='dropdown-content'>
          <li><a href="#!">one</a></li>
          <li><a href="#!">two</a></li>
          <li class="divider"></li>
          <li><a href="#!">three</a></li>
        </ul>
      </div>
    </div>    
  </div>
</div>

js

$(document).ready(function() {
  console.log("intiate dropdown");
  $('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false,
    hover: true,
    gutter: 0,
    belowOrigin: false,
    alignment: 'left'
  });
});

css

.card {
  overflow: visible !important;
};

解决方案

There is a bug with dropdowns and selects in materialize 0.97.2 and 0.97.3; for more info see https://github.com/Dogfalo/materialize/issues/2265 and https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931.

I'm using the Sass version of MaterializeCSS in Meteor and worked around the problem by using poetic:materialize-scss@1.97.1 in my meteor packages file to force the old version. The dropdowns now work, old jquery and all!

这篇关于实现下拉菜单无法在卡内工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！