OpenCart购物车按钮移动端关闭问题及jQuery类操作需求

Got it, let's tackle that mobile cart dropdown issue you're facing. Desktop works perfectly with hover open/close, but mobile won't close when tapping outside the cart window—super common problem, and easy to fix with a few JS tweaks.

First, Make Sure Your Elements Have Clear Classes #

First, double-check your cart button and dropdown markup. You'll want distinct classes to target them easily. For example:

<button class="cart-button">Cart</button>
<div class="cart-dropdown">
  <!-- Cart content here -->
</div>

(If your OpenCart theme already uses classes like btn-cart or cart-content, use those instead—just adjust the selectors below.)

Add the JavaScript Logic #

Drop this code into your theme's custom JS file (like custom.js) or at the bottom of your common.tpl file, wrapped in a document ready handler:

$(document).ready(function() {
  const cartButton = $('.cart-button');
  const cartDropdown = $('.cart-dropdown');

  // Toggle cart dropdown on button click (mobile/desktop)
  cartButton.on('click touchstart', function(e) {
    e.stopPropagation(); // Prevent this click from triggering the document click handler
    cartDropdown.toggleClass('active');
  });

  // Close dropdown when clicking/tapping outside of it or the button
  $(document).on('click touchstart', function(e) {
    if (!cartButton.is(e.target) && cartButton.has(e.target).length === 0 && 
        !cartDropdown.is(e.target) && cartDropdown.has(e.target).length === 0) {
      cartDropdown.removeClass('active');
    }
  });

  // Optional: Close dropdown if user presses Escape key
  $(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
      cartDropdown.removeClass('active');
    }
  });
});

Update Your CSS #

Make sure your dropdown is hidden by default and shows when the active class is added:

.cart-dropdown {
  display: none;
  /* Your existing styling here */
}

.cart-dropdown.active {
  display: block; /* Or use flex if your layout needs it */
}

/* Keep desktop hover behavior intact */
@media (min-width: 768px) {
  .cart-button:hover + .cart-dropdown,
  .cart-dropdown:hover {
    display: block;
  }
}

Why This Works #

• e.stopPropagation() on the button click prevents the event from bubbling up to the document, so clicking the button doesn't immediately close the dropdown we just opened.
• The document click handler checks if the click target is not the cart button or inside the dropdown. If it's outside, we remove the active class to close the dropdown.
• We include touchstart alongside click to make it responsive on mobile touch devices.

Quick Checks for OpenCart Specifics #

• If your theme uses oc-js-cart or other built-in classes, replace the selectors above with those. You can inspect your cart elements in the browser dev tools to find the correct classes.
• Make sure you're not conflicting with existing OpenCart cart scripts. If your theme already has some cart JS, wrap this logic in a $(window).on('load', function() { ... }) instead to ensure it runs after the theme's scripts.

That should do it—test on mobile, tap the cart button to open, then tap anywhere outside to close. Works like a charm!

内容的提问来源于stack exchange，提问作者Robert Ursărescu