响应菜单未折叠并重新加载页面

Question

在http://www.dentalo.se/contact它使用移动设备的响应菜单。

当点击菜单按钮时，它折叠菜单，但同时重新加载页面。

任何人都可以告诉我为什么以及如何修复它？

谢谢你的时候，你正在帮助我。

编辑

HTML

<div class="container"> 
     <div class="navbar-header"> 
      <!-- BEGIN RESPONSIVE MENU TOGGLER --> 
      <button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <!-- END RESPONSIVE MENU TOGGLER --> 
      <!-- BEGIN LOGO (you can use logo image instead of text)--> 
      <a class="navbar-brand logo-v1" href="/"> 
       <img src="/assets/img/logo_blue.png" id="logoimg" alt=""> 
      </a> 
      <!-- END LOGO --> 
     </div> 

     <!-- BEGIN TOP NAVIGATION MENU --> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li id="MainMenuHome"><a href="/">Start</a></li> 
       <li class="dropdown" id="MainMenuDentalo"> 
        <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#"> 
         Dentalo 
         <i class="icon-angle-down"></i> 
        </a> 
        <ul class="dropdown-menu"> 
         <li id="SubMenuAbout"><a href="/about">Om Dentalo</a></li> 
         <li id="SubMenuJob"><a href="/job">Lediga tjänster</a></li> 
         <li id="SubMenuConnect"><a href="/connect">Anslut</a></li> 
        </ul> 
       </li> 
       <li id="MainMenuLogIn"><a href="/login">Logga in</a></li> 
       <li id="MainMenuContact"><a href="/contact">Kontakt</a></li> 
       <li class="menu-search"> 
        <span class="sep"></span> 
        <i class="icon-search search-btn"></i> 

        <div class="search-box"> 
         <form action="#"> 
          <div class="input-group input-large"> 
           <asp:TextBox runat="server" placeholder="Sök..." CssClass="form-control" ID="textBoxSearch"></asp:TextBox> 
           <span class="input-group-btn"> 
            <asp:Button runat="server" CssClass="btn theme-btn" ID="ButtonSearch" OnClick="ButtonSearch_Click" Text="Sök" /> 
           </span> 
          </div> 
         </form> 
        </div> 
       </li> 
      </ul>       
     </div> 
     <!-- BEGIN TOP NAVIGATION MENU --> 
    </div> 

的JavaScript

/* 
* Project: Twitter Bootstrap Hover Dropdown 
* Author: Cameron Spear 
* Contributors: Mattia Larentis 
* 
* Dependencies?: Twitter Bootstrap's Dropdown plugin 
* 
* A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience. 
* 
* No license, do what you want. I'd love credit or a shoutout, though. 
* 
* http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ 
*/ 
;(function($, window, undefined) { 
    // outside the scope of the jQuery plugin to 
    // keep track of all dropdowns 
    var $allDropdowns = $(); 

    // if instantlyCloseOthers is true, then it will instantly 
    // shut other nav items when a new one is hovered over 
    $.fn.dropdownHover = function(options) { 

     // the element we really care about 
     // is the dropdown-toggle's parent 
     $allDropdowns = $allDropdowns.add(this.parent()); 

     return this.each(function() { 
      var $this = $(this), 
       $parent = $this.parent(), 
       defaults = { 
        delay: 500, 
        instantlyCloseOthers: true 
       }, 
       data = { 
        delay: $(this).data('delay'), 
        instantlyCloseOthers: $(this).data('close-others') 
       }, 
       settings = $.extend(true, {}, defaults, options, data), 
       timeout; 

      $parent.hover(function(event) { 
       // so a neighbor can't open the dropdown 
       if(!$parent.hasClass('open') && !$this.is(event.target)) { 
        return true; 
       } 

       if(shouldHover) { 
        if(settings.instantlyCloseOthers === true) 
         $allDropdowns.removeClass('open'); 

        window.clearTimeout(timeout); 
        $parent.addClass('open'); 
       } 
      }, function() { 
       if(shouldHover) { 
        timeout = window.setTimeout(function() { 
         $parent.removeClass('open'); 
        }, settings.delay); 
       } 

      }); 

      // this helps with button groups! 
      $this.hover(function() { 
       if(shouldHover) { 
        if(settings.instantlyCloseOthers === true) 
         $allDropdowns.removeClass('open'); 

        window.clearTimeout(timeout); 
        $parent.addClass('open'); 
       } 
      }); 

      // handle submenus 
      $parent.find('.dropdown-submenu').each(function(){ 
       var $this = $(this); 
       var subTimeout; 
       $this.hover(function() { 
        if(shouldHover) { 
         window.clearTimeout(subTimeout); 
         $this.children('.dropdown-menu').show(); 
         // always close submenu siblings instantly 
         $this.siblings().children('.dropdown-menu').hide(); 
        } 
       }, function() { 
        var $submenu = $this.children('.dropdown-menu'); 
        if(shouldHover) { 
         subTimeout = window.setTimeout(function() { 
          $submenu.hide(); 
         }, settings.delay); 
        } else { 
         // emulate Twitter Bootstrap's default behavior 
         $submenu.hide(); 
        } 
       }); 
      }); 
     }); 
    }; 

    // helper variables to guess if they are using a mouse 
    var shouldHover = false, 
     mouse_info = { 
      hits: 0, 
      x: null, 
      y: null 
     }; 
    $(document).ready(function() { 
     // apply dropdownHover to all elements with the data-hover="dropdown" attribute 
     $('[data-hover="dropdown"]').dropdownHover(); 

     // if the mouse movements are "smooth" or there are more than 20, they probably have a real mouse 
     $(document).mousemove(function(e){ 
      mouse_info.hits++; 
      if (mouse_info.hits > 20 || (Math.abs(e.pageX - mouse_info.x) + Math.abs(e.pageY - mouse_info.y)) < 4) { 
       $(this).unbind(e); 
       shouldHover = true; 
      } 
      else { 
       mouse_info.x = e.pageX; 
       mouse_info.y = e.pageY; 
      } 
     }); 
    }); 

    // for the submenu to close on delay, we need to override Bootstrap's CSS in this case 
    var css = '.dropdown-submenu:hover>.dropdown-menu{display:none}'; 
    var style = document.createElement('style'); 
    style.type = 'text/css'; 
    if (style.styleSheet) { 
     style.styleSheet.cssText = css; 
    } else { 
     style.appendChild(document.createTextNode(css)); 
    } 
    $('head')[0].appendChild(style); 
})(jQuery, this); 

Answer 1

看来，你的button元素（navbar-btn）被提交表单。尝试在按钮元素上添加type =“button”。

同样在点击事件处理程序中，您还可以尝试将e.preventDefault()添加到您的点击事件处理程序中。

我似乎无法从按钮的点击事件中找到JavaScript，所以我可以提供更多帮助。如果这不起作用，请编辑您的问题以显示相关的HTML和JavaScript部分。