主页 / coding / 问题 / 79597589
Accepted
VIVEK ROBIN KUJUR
Asked: 2025-04-29 12:02:44 +0800 CST

鼠标点击时切换和添加元素类的问题

  • 772

我在尝试在鼠标点击事件发生时切换并向元素添加类时遇到了问题。同样，我有多个“li”元素。我想将“class = subdrop active”添加到选定的锚点标签，并将“class = active”添加到后续的 li 标签。我不确定我是否正确处理了类操作。有人能建议一下正确的方法吗？

<li class="submenu">
  <a href="javascript:void(0);">
    <i class="ti ti-layout-dashboard"></i>
    <span>Admin Profile</span>
    <span class="menu-arrow"></span>
  </a>
  <ul>
    <li>
      <a href="<?php echo base_url('admin_dashboard'); ?>">Dashboard</a>
    </li>
    <li>
      <a href="<?php echo base_url('admin_profile'); ?>">Profile</a>
    </li>
    <li>
      <a href="#">Settings</a>
    </li>
    <li>
      <a href="#">Contacts</a>
    </li>
  </ul>
</li>

尝试在选定的 li 点击上获取以下结果

<li class="submenu">
 <a href="javascript:void(0);" class="subdrop active"><i class="ti ti-layout-dashboard"></i><span>Admin Profile</span><span class="menu-arrow"></span>
</a>
<ul>
  <li><a href="<?php echo base_url('admin_dashboard'); ?>" class="active">Dashboard</a></li>
  <li><a href="<?php echo base_url('admin_profile'); ?>">Profile</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Contacts</a></li>
</ul>
</li>
javascript

1 个回答

  1. Best Answer

    嘿，这也是我一直纠结的问题。对我来说，有效的方法是保留两个简单的处理程序：一个用于点击顶层菜单，一个用于点击子菜单链接。这样就不会出现嵌套或重复的逻辑。

    <ul>
  <li class="submenu">
    <a href="javascript:void(0);">
      <i class="ti ti-layout-dashboard"></i>
      <span>Admin Profile</span>
      <span class="menu-arrow"></span>
    </a>
    <ul>
      <li><a href="<?php echo base_url('admin_dashboard'); ?>">Dashboard</a></li>
      <li><a href="<?php echo base_url('admin_profile'); ?>">Profile</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </li>
  <!-- repeat for other .submenu items -->
</ul>

$(function(){
  // clicking the main menu title
  $(document).on('click', '.submenu > a', function(e){
    e.preventDefault();
    var $toggle  = $(this);
    var $parent  = $toggle.closest('.submenu');
    var $inner   = $toggle.next('ul');

    // close any other open submenu
    $('.submenu').not($parent).each(function(){
      $(this).children('a').removeClass('subdrop active');
      $(this).children('ul').slideUp(150);
    });

    // toggle the one we clicked
    $toggle.toggleClass('subdrop active');
    $inner.slideToggle(150);

    // if opening, give its first child link the active state
    if ($toggle.hasClass('active')) {
      $inner.find('a').removeClass('active');
      $inner.find('li:first > a').addClass('active');
    }
  });

  // clicking any child link
  $(document).on('click', '.submenu ul li a', function(e){
    e.preventDefault();
    var $link    = $(this);
    var $parent  = $link.closest('.submenu');
    var $toggle  = $parent.children('a');

    // clear all other child‐link highlights, then highlight this one
    $('.submenu ul li a').removeClass('active');
    $link.addClass('active');

    // make sure this submenu is open
    $('.submenu > a').not($toggle)
      .removeClass('subdrop active')
      .next('ul').slideUp(150);

    $toggle.addClass('subdrop active');
    $toggle.next('ul').slideDown(150);
  });
});

    点击顶级链接时，它会首先关闭所有其他子菜单，然后自动切换打开/关闭状态。打开它还会自动选择第一个子项。点击子链接只会高亮显示该链接，确保其父级链接处于打开状态，并关闭所有其他菜单。

    • 1

相关问题