2017-09-06 183 views
1

我們有一個使用OctoberCMS構建的單頁響應式網站,一切似乎都正常,減去一個小問題。導航欄有一個下拉菜單,當您點擊或點擊其中的某個項目時,該菜單不會自動關閉。在桌面上,您必須單擊頁面上的任意位置才能關閉,並且在移動設備上,您需要再次單擊菜單按鈕。只是尋找正確的方式來設置。下面是當前的代碼塊,請注意,我們使用在網站上引導3.3.1:Bootstrap下拉菜單未關閉點擊

<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
         <span class="sr-only">Toggle navigation</span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
     <a class="navbar-brand" href="#home"><img src="{{ 'assets/images/logo.png'|theme }}" alt="logo"></a> 
 
    </div> 
 
    <div class="collapse navbar-collapse navbar-right"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="scroll active"><a href="#home">Home</a></li> 
 
     <li class="scroll dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false" role="button">Main Menu 2<span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a class="dropdown-item" href="#1">Section 1</a></li> 
 
      <li><a class="dropdown-item" href="#2">Section 2</a></li> 
 
      <li><a class="dropdown-item" href="#3">Section 3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="scroll"><a href="#main3">Main Menu 3</a></li> 
 
     <li class="scroll"><a href="#main4">Main Menu 4</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <!--/.container--> 
 
</nav> 
 
<!--/nav-->

看在開發者控制檯我看到下面的錯誤時:

Uncaught TypeError: Cannot read property 'top' of undefined 
 
    at HTMLAnchorElement.<anonymous> (main.js:21) 
 
    at Function.each (jquery.js:4) 
 
    at init.each (jquery.js:4) 
 
    at Scroll (main.js:20) 
 
    at main.js:5 
 
    at dispatch (jquery.js:5) 
 
    at v.handle (jquery.js:5)

這裏是從main.js文件滾動碼:

function Scroll() { 
 
\t \t var contentTop  = []; 
 
\t \t var contentBottom = []; 
 
\t \t var winTop  = $(window).scrollTop(); 
 
\t \t var rangeTop = 200; 
 
\t \t var rangeBottom = 500; 
 
\t \t $('.navbar-collapse').find('.scroll a').each(function(){ 
 
\t \t \t contentTop.push($($(this).attr('href')).offset().top); 
 
\t \t \t contentBottom.push($($(this).attr('href')).offset().top + $($(this).attr('href')).height()); 
 
\t \t }) 
 
\t \t $.each(contentTop, function(i){ 
 
\t \t \t if (winTop > contentTop[i] - rangeTop){ 
 
\t \t \t \t $('.navbar-collapse li.scroll') 
 
\t \t \t \t .removeClass('active') 
 
\t \t \t \t .eq(i).addClass('active'); \t \t \t 
 
\t \t \t } 
 
\t \t }) 
 
\t }; 
 

 
\t $('#tohash').on('click', function(){ 
 
\t \t $('html, body').animate({scrollTop: $(this.hash).offset().top - 5}, 1000); 
 
\t \t return false; 
 
\t });

預先感謝任何幫助,您可以提供。

+0

我知道這是你使用的bootstrap版本的一個小版本,但是我可以點擊下拉菜單並下拉菜單來關閉菜單。這是一個實現代碼的[代碼項目](https://www.codeply.com/go/cviX07Fv3T),您可以查看一下。 – cwanjt

+0

你包括jQuery嗎?作爲引導CSS取決於jQuery的某些事件 – Se0ng11

+0

是的,我包括jQuery。我今天玩了一段時間,看起來像是我們使用的10月CMS主題中的js有點時髦。去發佈錯誤和看起來導致上述問題的代碼。 –

回答

0

您的代碼正常工作。語法錯誤在href="#"中出現。試試這個代碼

<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
     <a class="navbar-brand" href="#home"><img src="{{ 'assets/images/logo.png'|theme }}" alt="logo"></a> 
    </div> 
    <div class="collapse navbar-collapse navbar-right"> 
     <ul class="nav navbar-nav"> 
     <li class="scroll active"><a href="#home">Home</a></li> 
     <li class="scroll dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">Main Menu 2<span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a class="dropdown-item" href="#1">Section 1</a></li> 
      <li><a class="dropdown-item" href="#2">Section 2</a></li> 
      <li><a class="dropdown-item" href="#3">Section 3</a></li> 
      </ul> 
     </li> 
     <li class="scroll"><a href="#main3">Main Menu 3</a></li> 
     <li class="scroll"><a href="#main4">Main Menu 4</a></li> 
     </ul> 
    </div> 
    </div> 
    <!--/.container--> 
</nav> 
<!--/nav--> 
+0

謝謝。我做了一些更多的測試,並在開發人員控制檯中看到錯誤。我從上面的js文件中添加了錯誤和滾動代碼。 –

相關問題