Question

无论出于何种原因，我的Materialise下拉菜单不会在悬停时掉落（它们应该是默认值）。

<ul id="dropdown2" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance" id="camp-dates">CAMP DATES</a></li>
    <li><a href="#" class="hover-nav-finance" id="prices">CAMP PRICES</a></li>
</ul>
<ul id="dropdown1" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance"  id="finance-webhooks">STRIPE FORMS</a></li>
    <li><a href="#" class="hover-nav-finance"  id="update-forms">UPDATE FORMS</a></li>
</ul>
<ul id="dropdown4" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance" id="camp-dates">CAMP DATES</a></li>
    <li><a href="#" class="hover-nav-finance" id="prices">CAMP PRICES</a></li>
</ul>
<ul id="dropdown3" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance"  id="finance-webhooks">STRIPE FORMS</a></li>
    <li><a href="#" class="hover-nav-finance"  id="update-forms">UPDATE FORMS</a></li>
</ul>

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">&nbsp; ACCOUNTING</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down hlight">
            <li><a href="#" class="bold-only" id="pay-by-check">CHECK PAYMENT</a></li>
            <li><a class="dropdown-button bold-only" href="#" data-activates="dropdown2">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a class="dropdown-button bold-only" href="#" data-activates="dropdown1">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a href="#" class="bold-only" id="tuition-reports">REPORTS</a></li>
            <li><a href="#" class="bold-only" id="finance-charts">CHARTS</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="#" id="pay-by-check">CHECK PAYMENT</a></li>
            <li><a class="dropdown-button" href="#" data-activates="dropdown4">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a class="dropdown-button" href="#" data-activates="dropdown3">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
            <li><a href="#" id="tuition-reports">REPORTS</a></li>
            <li><a href="#" id="finance-charts">CHARTS</a></li>
        </ul>
    </div>
</nav>

我已经初始化了下拉列表（我在Meteor中，所以初始化将在onRendered模板中）：

Template.myTemplate.onRendered(function() {
  $(".dropdown-button").dropdown();
}

所以我的想法是看看我是否可以用一些CSS（我的弱点之一）强制它：

.nav-wrapper ul.hlight li:hover #dropdown2 {
  display: block;
}

精氨酸。这是错的。如果默认设置不起作用，我可以在CSS中强制执行此操作吗？现在我的Meteor版本正在使用jQuery 1.11

Answer 1

经典方法不适用于Materialise CSS，因为它有自己的JavaScript方法。

定义dropdown-button＆amp;模板中的dropdown-content如：

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

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
    <li><a href="#" class="hover-nav-finance" id="camp-dates">CAMP DATES</a></li>
    <li><a href="#" class="hover-nav-finance" id="prices">CAMP PRICES</a></li>
</ul>

然后在客户端JavaScript上启动它：

Template.myTemplate.onRendered(function() {
    $('.dropdown-button').dropdown({
          inDuration: 300,
          outDuration: 225,
          constrain_width: false, // Does not change width of dropdown to that of the activator
          hover: true, // Activate on hover
          gutter: 0, // Spacing from edge
          belowOrigin: false, // Displays dropdown below the button
          alignment: 'left' // Displays dropdown with edge aligned to the left of button
        }
      );
}

现在，在悬停时它会下降，因为现在您定义了：hover: true, // Activate on hover

我认为你错过了dropdown-button部分。

有关详细信息：http://materializecss.com/dropdown.html

物化下降不会在悬停时下降

1 个答案: