问题描述
我正在尝试在卡中使用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:[email protected] 解决了该问题,以强制使用旧版本.下拉列表现在可以使用了,旧的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:[email protected] in my meteor packages file to force the old version. The dropdowns now work, old jquery and all!
这篇关于实现下拉菜单无法在卡内工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!