Início / coding / Perguntas / 79597589
Accepted
VIVEK ROBIN KUJUR
Asked: 2025-04-29 12:02:44 +0800 CST

Problema ao alternar e adicionar classes a elementos com clique do mouse

  • 772

Estou com um problema ao tentar alternar e adicionar classes a elementos quando ocorre um evento de clique do mouse. Da mesma forma, tenho vários elementos "li". Quero adicionar "class = subdrop active" à tag de âncora selecionada e "class = active" à tag li subsequente. Não tenho certeza se estou lidando com a manipulação de classes corretamente. Alguém poderia sugerir a abordagem correta?

<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>

Tentando obter os seguintes resultados em cliques li selecionados

<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 respostas

  1. Best Answer

    Olá, isso também é algo com que tenho lutado. O que funcionou para mim foi manter dois manipuladores simples: um para cliques no nível superior e outro para cliques nos links do submenu. Dessa forma, você nunca acaba aninhando ou duplicando lógica.

    <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);
  });
});

    Ao clicar no link de nível superior, ele primeiro fecha qualquer outro submenu e, em seguida, alterna entre aberto/fechado. Abri-lo também seleciona automaticamente o primeiro item filho. Clicar em um link filho simplesmente destaca esse link, garante que o link pai esteja aberto e fecha todos os outros menus.

    • 1

relate perguntas