Duplicating bootstrap menu

Question

Duplicating bootstrap menu

Navigation

#1 by (1 votes)

2

I'm noob in web development and I need a little help from my colleagues, if possible.

I'm doing a site, using the bootstrap, and I came across a little problem. I have two drop-down menus and when I click on one or the other both menus are opened, as shown below:

PS: I use the same CSS for both menus.

HTMLofthemenus:

<divclass="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>

Does anyone know how to explain what I'm doing wrong? When the user clicks a menu the page should open the drowp-down for the menu clicked and not both at the same time.

Below CSS.

As it is very large and does not fit here in the question description, follow the link so that you can visualize it.

link

php html5 css bootstrap slimframework

asked by anonymous 14.12.2017 / 12:01

1 answer

How to leave table td automatically increasing or decreasing the size according to the number of characters? Always ask for password in Git Bash Windows

score 1 · Accepted Answer

As per the code provided in the comments:

$(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. You do not need to include .cart-link in the selector. Just .btn-cart-md already encompasses the button link.

2. In var $dd_menu = $('.btn-cart-md .cart-dropdown'); , you must specify a single <ul> with class .cart-dropdown that will be opened, using .find .

The code looks like this:

$(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');
      }
   });
});