Question

我坚持使用响应式设计，我正在做laravel。以下代码在普通视图中工作，但在导航栏中隐藏在移动视图中。我检查了javascript函数但无法解决问题。这是我的HTML代码

 <div class="container">
      <nav>
            <ul>
              <li class="active"><a href="#">Home</a> </li>
              <li><a href="#">Our School</a>
                <ul>
                  <li><a href="">Key Features</a></li>
                  <li><a href="">Infrastructure</a></li>
                  <li><a href="">Fee System</a></li>
                  <li><a href="">Commitment & Objectives</a></li>
                  <li><a href="">Rules & Regulations</a></li>
                  <li><a href="">Hostel Management</a></li>
                </ul>
              </li>
              <li><a href="#">Our Facilities</a> </li>
              <li><a href="#">News & Events</a> </li>
              <li><a href="#">Photo Gallery</a> </li>

              <li><a href="#">Student Zone</a> </li>
            </ul>
          </nav>
    </div>
  </div>
</div>
<!-- Mobile Menu Area Start -->
<div class="mobile-menu-area" style="display:none">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="mobile-menu">
          <nav id="dopdown">
            <ul>
              <li><a href="#">Home</a>
              <li><a href="#">Our School</a>
                <ul>
                  <li><a href="">Key Features</a></li>
                  <li><a href="">Infrastructure</a></li>
                  <li><a href="">Fee System</a></li>
                  <li><a href="">Commitment & Objectives</a></li>
                  <li><a href="">Rules & Regulations</a></li>
                  <li><a href="">Hostel Management</a></li>
                </ul>
              </li>
              <li><a href="#">Our Facilities</a> </li>
              <li><a href="#">News & Events</a> </li>
              <li><a href="#">Photo Gallery</a> </li>
              <li><a href="#">Downloads</a> </li>
              <li><a href="#">Student Zone</a> </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

js code

 $('nav#dropdown').meanmenu({siteLogo: "<a href='{{asset('client/home')}}' class='logo-mobile-menu'><img src='images/logo.png' alt='unable' /></a>"});
new WOW().init();
    $.scrollUp({
    scrollText: '<i class="fa fa-arrow-up"></i>',
    easingType: 'linear',
    scrollSpeed: 900,
    animation: 'fade'
});

在移动视图中，它不显示头文件。

Answer 1

您在<nav id ='dopdown'>中提供的ID以及您在js function $(;nav#dropdown)中使用的ID是不同的。这可能是您遇到问题的原因。请试一试。

无法在moblile视图中显示导航栏

1 个答案: