javascript 点击链接时滑动切换，但保持链接可点击到页面

vsikbqxv 于 2023-01-01 发布在 Java

关注(0)|答案(1)|浏览(118)

我在一个网站上有一个“点”导航，它有一个带子菜单的链接。最初，我有一个简单的JQ函数，它可以在悬停时滑动切换子菜单，但这会导致一些“弹跳”问题。所以，我把它恢复为click（）函数。

$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
  e.preventDefault();
  $(this).siblings('.sub-menu').slideToggle('800');
});

在执行此操作时，我需要添加preventDefault（），以便在单击时打开子菜单，但禁用链接。
结果是，我需要保持该链接处于活动状态以导航到顶级页面，但似乎找不到允许打开子菜单的最佳方式（单击或悬停;没有跳动）并保持菜单链接有效。
菜单的HTML

<div class="menu-primary-container">
  <ul id="troy-dot-nav" class="menu reverse-dots">
      <li class="..."><a href="...">About</a></li>
      <li class="... menu-item-81">
          <a href="...">Integrated Services</a>
          <ul class="sub-menu" style="display: none;">
              <li class="..."><a href="...">EPC &amp; Project Services</a></li>
              <li class="..."><a href="...">Pipeline Construction</a></li>
              <li class="..."><a href="...">Facility Construction</a></li>
              <li class="..."><a href="...">Integrity Management</a></li>
          </ul>
      </li>
      <li class="..."><a href="...">Safety &amp; Quality</a></li>
      <li class="..."><a href="...">Careers</a></li>
      <li class="..."><a href="...">Contact Us</a></li>
  </ul>
</div>

CSS在li：after上创建了点。删除了多余的HTML以使这里看起来更清晰。

JavaScript

来源：https://stackoverflow.com/questions/74963662/slide-toggle-on-link-click-but-keep-link-clickable-to-page

1条答案

按热度按时间

ljsrvy3e1#

你不能用css来添加/删除一个活动类并关闭所有/打开相关子菜单吗？
就像这样：

$(document).ready(function() {
  $('.link').click(function() {
    // Remove the "active" class from all links
    $('.link').removeClass('active');

    // Add the "active" class to the clicked link
    $(this).addClass('active');

    // Find the corresponding sublist
    var sublistId = $(this).data('sublist');
    var sublist = $('#' + sublistId);

    // Close all sublists
    $('.sublist').hide();

    // Open the corresponding sublist
    sublist.show();
  });
});

用这样的html：

<ul>
  <li><a href="#" class="link" data-sublist="sublist-1">Link 1</a></li>
  <li><a href="#" class="link" data-sublist="sublist-2">Link 2</a></li>
  <li><a href="#" class="link" data-sublist="sublist-3">Link 3</a></li>
</ul>

<ul id="sublist-1" class="sublist">
  <li>Sublist item 1</li>
  <li>Sublist item 2</li>
</ul>

<ul id="sublist-2" class="sublist">
  <li>Sublist item 3</li>
  <li>Sublist item 4</li>
</ul>

<ul id="sublist-3" class="sublist">
  <li>Sublist item 5</li>
  <li>Sublist item 6</li>
</ul>

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 点击链接时滑动切换，但保持链接可点击到页面

1条答案

相关问题

热门标签

最新问答