防止屏幕向下移动到响应下拉菜单中的锚点。

Question

菜单截图当出现下拉菜单(id=“子菜单-1”或“子菜单-2”等)后，单击顶部按钮(class=“切换-1”或“切换-2”等)，它会将显示移至锚并隐藏顶部按钮菜单(class=“移动-菜单”)。我怎么才能阻止这场轮班？我试过“指针事件:没有”，但是下拉菜单根本不起作用。

$('.mobile-menu').each(function() {
    var $_navbar  = $(this);
    var $_toggles = $_navbar.find('.toggle');
    var $_panels = $_navbar.find('.sub-menu');
    var active_classname = 'active';

$_toggles.each(function() {
    var $_this_toggle = $(this);
    var $_this_panel = $( $_this_toggle.attr('sm-id') );

    $_this_toggle.click(function() {                                    
        $_toggles.not($_this_toggle).removeClass(active_classname);
        $_this_toggle.toggleClass(active_classname);
        $_panels.not($_this_panel).slideUp();
        $_this_panel.stop().slideToggle();
    });
});
});

<nav class="mob-nav">
  <div class="mobile-menu">
     <a sm-id="#sub-menu-1" class="hotdog toggle toggle-1" href="#sub-menu-1"></a>
     <a sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>
     <a sm-id="#sub-menu-3" class="mob-menu-phone toggle toggle-3" href="#sub-menu-3"></a>
     <a sm-id="#sub-menu-4" class="mob-menu-search toggle toggle-4" href="#sub-menu-4"></a>
  </div>

  <div class="sub-menu-wrapper">
        <div id="sub-menu-1" class="sub-menu">
          <ul>
            <li><a href="#">Продукция</a></li>
            <li><a href="#">Технологии применения</a></li>
            <li><a href="#">Объекты</a></li>
            <li><a href="#">Документация</a></li>
            <li><a href="#">О компании</a></li>
            <li class="profile-links">
              <span>
                <a href="#">Заказчику</a>
              </span>
              <span>
                <a href="#">Проектировщику</a>
              </span>
            </li>
            <li class="profile-links">
              <span>
                <a href="#">Подрядчику</a>
              </span>
              <span>
                <a href="#">Частным клиентам</a>
              </span>
            </li>
          </ul>
        </div>
        <div id="sub-menu-2" class="sub-menu">
          <form action="post" class="email-feedback">
            <input type="text" name="user-name" class="mob-nav-input" placeholder="Ваше имя">
            <input type="text" name="mobile-number" class="mob-nav-input" placeholder="Номер телефона">
            <textarea name="interest" class="mob-nav-input" placeholder="Что Вас интересует?"></textarea>
            <a href="#" class="button">Отправить</a>
          </form>
        </div>
        <div id="sub-menu-3" class="sub-menu">
          <ul>
            <li>+7 812 423-85-85</li>
            <li>+7 812 423-85-85</li>
          </ul>
        </div>
        <div id="sub-menu-4" class="sub-menu">
          <form action="post" class="mobile-search">
            <input type="search" class="mob-nav-input">
            <input type="submit" class="search-param-sub" value="">
          </form>
        </div>
      </div>

​

.mobile-menu {
    overflow: hidden;
}

.mobile-menu a {
    border: #3a3a3a 1px solid;
    height: 60px;
    display: block;
    width: 25%;
    float: left;
}

.sub-menu {
    padding-top: 10px;
    display: none;
}

我该去哪里找解决方案？用CSS还是JS？

Answer 1

你在找event.preventDefault()

$_this_toggle.click(function(e) {                                    
  e.preventDefault();

因为您的锚有一个以href开头的#，该哈希值对应于页面上具有相同id或name的元素，因此浏览器将向下滚动页面到匹配的元素，并更改URL中的散列。您需要防止默认浏览器行为。

Answer 2

将此onclick="event.preventDefault()"添加到标记中

<a onclick="event.preventDefault()" sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>

最简单的解决办法就是这个。当您单击带有属性href=的标记“#示例”时，自然会迫使浏览器去一个带有id=“示例”属性的标记。为此，应避免正确使用event.preventDefault()