Question

我这里有一个jsfiddle - https://jsfiddle.net/810mp54o/26/

我不喜欢这样做，但我有一个有效的例子，但我确信有更好的方法。

我有一个简单的标题，其中包含下面的内容，我想在移动设备上加入。

我正在使用jquery添加一个开放类，但我需要添加！重要的是要使用它 - 这是更好的方法。

此外，我知道人们永远不会调整浏览器的大小，这可能会在桌面或移动设备上看到，但是有一种方法可以始终将手风琴显示为移动尺寸。

    $(document).ready(function(){
        $('.js-btn').on('click', function(){
            $(this).next('.content').toggleClass('open');
        })
    });

Answer 1

好吧，你可以使用bootstrap（https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h）中的navibar等东西

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>

    <div class="container">
      <h3>Basic Navbar Example</h3>
      <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
    </div>

    </body>
    </html>

仅限移动手风琴导航

1 个答案: