物化框架中的下拉菜单

Question

我使用了下面 drop-down 的具体化代码。但是不行

<ul id="dropdown1" class="dropdown-content">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>
     <a class="btn dropdown-trigger" href="#" data-target="dropdown1">Menu<i class="material-icons right">arrow_drop_down</i></a>

Answer 1

我解决了你的问题。我想您的代码中没有包含以下 js 代码部分。

<script>
    $(document).ready(function() {
        $('.dropdown-button').dropdown('open');
    });
</script>

为了您的方便，我在一个 html 文件中使用物化下拉菜单实现了完整的代码。我在正文底部添加了 JavaScript 代码，这应该是您无法使用代码的问题。当您创建单独的苍蝇时，您应该将 JavaScript 和 css 文件的路径添加到您的 html 代码相关顺序。

<!DOCTYPE html>
<html>
<head>
    <title>Select</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body class="row">

    <!-- your code start -->    
    <div class="input-field col s6 m6 l6">      
      
        <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Click Me</a>

            <!-- Dropdown Structure -->
                <ul id="dropdown1" class="dropdown-content">
                    <li><a href="#">one</a></li> 
                    <li><a href="#">two</a></li> 
                    <li><a href="#">three</a></li>                  
                    <li><a href="#!"><i class="material-icons">arrow_drop_down</i>Menu</a></li>
                </ul>                   
                    
    </div>
    <!-- your code end -->
        
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
    
    <!-- Below code will make your modal open on document ready: -->
    <script>
        $(document).ready(function() {
            $('.dropdown-button').dropdown('open');
        });
    </script>

</body>
</html>

物化框架中的下拉菜单

drop-down in materialize framework

javascript

materialize