Question

今天我已经完成了我的投资组合的第一页，我看到一个下拉菜单（在PC的导航栏中）处于非活动状态。见Portfolio。我检查了style.css init.js，我不知道为什么我的下拉保持关闭模式:(

我试图复制具体化文档的html代码但没有效果。我不知道为什么id阻止!!你知道吗？

我的HTML代码：

    <div class="navbar-fixed ">
    <!-- marre menu -->
    <nav class=" blue">
        <div class="nav-wrapper container">

            <ul id="dropdown" class="dropdown-content">
                <li><a href="">Livrets de compétences</a></li>
                <li class="divider"></li>
                <li><a href="">Tutoriels</a></li>
            </ul>

            <a href="http://cappsim.fr" class=" brand-logo">Simon.C</a>
            <ul class="right hide-on-med-and-down white-text">
                <li class="waves-effect"><a href="#parcours">Mon parcours</a></li>

                <li><a class="dropdown-button " href="#!" data-hover="true"  data-activates="dropdown" data-beloworigin="true">Compétences<i class="material-icons right ">arrow_drop_down</i></a></li>

            <li class="waves-effect"><a href="">Veille Juridique</a></li>
            <li class="waves-effect"><a href="">Stages</a></li>
            <li class="waves-effect"><a href="">Curriculum Vitae</a></li>
            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li><a href="http://cappsim.fr">Accueil</a></li>
                <div class="divider"></div>

                <li><a class="dropdown-button " data-hover="true" data-activates="dropdown" data-beloworigin="true">Compétences<i class="material-icons right ">arrow_drop_down</i></a></li>

                <li><a href="http://cappsim.fr">Veille juridique</a></li>
                <li><a href="http://cappsim.fr">Stages</a></li>
                <li><a href="http://cappsim.fr">Curriculum Vitae</a></li>
            </ul>
            <a data-activates="nav-mobile" class="button-collapse "><i class="material-icons white-text"></i></a>

        </div>

    </nav>
</div>

我的JS代码：

(function ($) {
$(function () {

    $('.button-collapse').sideNav();
    $('.parallax').parallax();

    $('.dropdown-button').dropdown();

    $(document).ready(function () {
        $(".dropdown-button").dropdown();
    });




    function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    var items = document.querySelectorAll(".timeline li");

    // code for the isElementInViewport function


    function callbackFunc() {
        for (var i = 0; i < items.length; i++) {
            if (isElementInViewport(items[i])) {
                items[i].classList.add("in-view");
            }
        }
    }

    window.addEventListener("load", callbackFunc);
    window.addEventListener("scroll", callbackFunc);

}); // end of document ready


})(jQuery); // end of jQuery name space

Answer 1

我做了sample。在您的情况下，我认为这个缺失列表按钮将在单击时显示。 Here，您可以在物化中看到有关下拉JS的更多详细信息

＆＃13;

$('.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
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<!-- 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="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

＆＃13;

我以某种方式帮助过。

Answer 2

我已经更新了我的代码并放了你的样本 HTML：

http://pastebin.com/DA5piF0W

JS：

(function ($) {
$(function () {

    $('.button-collapse').sideNav();
    $('.parallax').parallax();

    $(document).ready(function () {
        $(".dropdown-button").dropdown();
    });

    $('.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: true, // Displays dropdown below the button
    });

css没有突破实现？

http://pastebin.com/Q2dQFjK0

然后，我的下拉内容工作

行<a class='dropdown-button btn' href='#' data-hover="true" data-activates='dropdown1'>Drop Me!</a>

不在

<div class="navbar-fixed ">
        <nav class=" blue">
            <div class="nav-wrapper container">

双胞胎按钮有效，但如果我在我的导航栏上复制样本，我没有效果......

我注意菜单＆＃34;三明治＆＃34;当我进入移动问题链接时，我是否已经消失了？

下拉按钮未激活实现

2 个答案: