Question

menu screenshot 单击顶部按钮（class =“toggle-1”或“toggle-2”等）后出现下拉菜单（id =“sub-menu-1”或“sub-menu-2”等），它将显示向下移动到锚点并隐藏顶部按钮菜单（class =“mobile-menu”）。我怎么能防止这种转变？我尝试了“pointer-events：none;”，但是下拉菜单根本不起作用。

if document.xpath("//records//record[@zone_transfer='success']").empty?
  puts "no matching elements"
  #got to next xml file
else
  puts "found matches"
  #do your other xpath search
end

--output:--
no matching elements

$('.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>

我应该在哪里搜索解决方案？在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 =＆＃34;＃example＆＃34;的标签时自然它迫使浏览器去一个id =＆＃34;例如＆＃34;属性。为此避免使用event.preventDefault（）正确

在响应式下拉菜单中阻止屏幕向下移动到锚点

2 个答案: