2

Sou noob no desenvolvimento web e preciso de uma ajudinha dos colegas, se possível.

Estou fazendo um site, utilizando o bootstrap, e me deparei com um probleminha. Tenho dois menus do tipo drop-down e quando clico em um ou em outro ambos os menus são abertos, conforme imagem abaixo:

PS: Utilizo o mesmo CSS para ambos os menus.

menu duplicado

HTML dos menus:

<div class="col-md-4 col-sm-4">
  <!-- Button Profile -->
  <div class="btn-cart-md">
      <a class="cart-link" href="#">
          <!-- Image -->
          <img class="img-responsive foto-redonda" src="/res/site/img/male.png" alt="" />

          <!-- Heading -->

              <h4>Olá, David Ferreira da Cunha</h4>
              <span>Minha conta</span>
              <div class="clearfix"></div>

              <ul class="cart-dropdown" role="menu">
                  <li>
                      <!-- Atralho para meus pedidos -->
                      <div class="cart-item">
                          <a class="btn btn-primary" data-toggle="modal" href="#">Meus pedidos</a>
                      </div>
                  </li>
                  <li>
                      <!-- Atalho para configurações da conta -->
                      <div class="cart-item">
                          <a class="btn btn-primary" data-toggle="modal" href="#">Configurações</a>
                      </div>
                  </li>
                  <li>
                      <!-- Atalho para finalizar sessão no navegador -->
                      <div class="cart-item">
                          <a class="btn btn-danger" data-toggle="modal" href="#">Sair</a>
                      </div>
                  </li>
              </ul>
              <div class="clearfix"></div>

      </a>
  </div>
  <div class="clearfix"></div>
</div>

<div class="col-md-2 col-sm-2">
  <!-- Button Kart -->
  <div class="btn-cart-md">
      <a class="cart-link" href="#">
          <!-- Image -->
          <img class="img-responsive" src="/res/site/img/cart.png" alt="" />
          <!-- Heading -->
          <h4>Meu carrinho</h4>
          <span>0 itens 0,00</span>
          <div class="clearfix"></div>
      </a>
      <ul class="cart-dropdown" role="menu">
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <!-- Item remove icon -->
                  <a href="#"><i class="fa fa-times"></i></a>
                  <!-- Image -->
                  <img class="img-responsive img-rounded" src="/res/site/img/nav-menu/nav1.jpg" alt="" />
                  <!-- Title for purchase item -->
                  <span class="cart-title"><a href="#">Exception Reins Evocative</a></span>
                  <!-- Cart item price -->
                  <span class="cart-price pull-right red">$200/-</span>
                  <div class="clearfix"></div>
              </div>
          </li>
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <!-- Item remove icon -->
                  <a href="#"><i class="fa fa-times"></i></a>
                  <!-- Image -->
                  <img class="img-responsive img-rounded" src="/res/site/img/nav-menu/nav2.jpg" alt="" />
                  <!-- Title for purchase item -->
                  <span class="cart-title"><a href="#">Taut Mayoress Alias Appendicitis</a></span>
                  <!-- Cart item price -->
                  <span class="cart-price pull-right red">$190/-</span>
                  <div class="clearfix"></div>
              </div>
          </li>
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <!-- Item remove icon -->
                  <a href="#"><i class="fa fa-times"></i></a>
                  <!-- Image -->
                  <img class="img-responsive img-rounded" src="/res/site/img/nav-menu/nav3.jpg" alt="" />
                  <!-- Title for purchase item -->
                  <span class="cart-title"><a href="#">Sinter et Molests Perfectionist</a></span>
                  <!-- Cart item price -->
                  <span class="cart-price pull-right red">$99/-</span>
                  <div class="clearfix"></div>
              </div>
          </li>
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <a class="btn btn-danger" data-toggle="modal" href="#shoppingcart1">Resumo do pedido</a>
              </div>
          </li>
      </ul>
      <div class="clearfix"></div>
  </div>
  <div class="clearfix"></div>
</div>

Alguém sabe me explicar o que estou fazendo de errado? Quando o usuário clicar em um menu a página deverá abrir o drowp-down referente ao menu clicado e não os dois ao mesmo tempo.

Abaixo o CSS.

Como ele é muito grande e não cabe aqui na descrição da pergunta, segue o link para que vocês possam visualizar.

http://ashobiz.dreamhosters.com/wrapbootstrap/cakefactory145/css/style.css

12
  • Insira o CSS e jQuery/Javascript se houver para que se possa testar o seu código e ajudá-lo.
    – ElvisP
    Commented 14/12/2017 às 11:27
  • Olá @EliseuB. Como o CSS é muito grande estou enviando o link onde o mesmo se encontra. ashobiz.dreamhosters.com/wrapbootstrap/cakefactory145/css/… Commented 14/12/2017 às 11:43
  • É este layout que você está usando? ashobiz.dreamhosters.com/wrapbootstrap/cakefactory145 Testei no Chrome, Edge e no Firefox e funcionou normalmente. Se você puder disponibilizar a sua URL e ver os códigos adicionais que você fez, que possivelmente deu bug, poderia melhor te ajudar.
    – ElvisP
    Commented 14/12/2017 às 11:50
  • tente adicionar o codigo fonte do navegador, sem as tags que vc utiliza no seu frame work Commented 14/12/2017 às 11:51
  • @EliseuB.é esse leiaute mesmo. A questão é que eu adicionei uma div ao lado do carrinho. Se você observar no leiaute do linlk que me enviou só tem a div do carrinho de compras. No meu localhost eu adicionei uma div do lado para o perfil de usuários (favor observar imagem que postei acima). Eu uso as mesmas classes para ambas as divs, quando clico em qualquer uma delas sempre abre os dois popups. Commented 14/12/2017 às 12:30

1 Resposta 1

1

Conforme código informado nos comentários:

$(document).ready(function() {
   $('.btn-cart-md .cart-link').click(function(e){
      e.preventDefault();
      var $dd_menu = $('.btn-cart-md .cart-dropdown');
      if ($dd_menu.hasClass('open')) {
         $dd_menu.fadeOut(); $dd_menu.removeClass('open');
      } else {
         $dd_menu.fadeIn(); $dd_menu.addClass('open');
      }
   });
});

1. Não é necessário incluir .cart-link no seletor. Basta .btn-cart-md que já engloba o link do botão.

2. Em var $dd_menu = $('.btn-cart-md .cart-dropdown');, é preciso especificar um único <ul> com a classe .cart-dropdown que será aberta, usando .find.

O código ficaria assim:

$(document).ready(function() {
   $('.btn-cart-md').click(function(e){
      e.preventDefault();
      var $dd_menu = $(this).find('.cart-dropdown');
      if ($dd_menu.hasClass('open')) {
         $dd_menu.fadeOut(); $dd_menu.removeClass('open');
         } else {
            $dd_menu.fadeIn(); $dd_menu.addClass('open');
      }
   });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .