Disappearing Bootstrap 3 Dropdown Issue Caused by Tab Click

There is an issue with the drop-down menu I created:

When I click on tabs like ALL or FILM, it closes all elements.

To reopen, I have to click again on the button PRODUCT.dropdown-toggle.

The code example looks like this:

var App = function () {
    return {
        //Animate Dropdown
        initAnimateDropdown: function () {
            function MenuMode() {
                jQuery('.dropdown').on('show.bs.dropdown', function (e) {
                    jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown();
                });
                jQuery('.dropdown').on('hide.bs.dropdown', function (e) {
                    jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp();
                });
            }

            jQuery(window).resize(function () {
                if (jQuery(window).width() > 768) {
                    MenuMode();
                }
            });

            if (jQuery(window).width() > 768) {
                MenuMode();
            }
        },

    };

}();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="dropdown mega-menu-fullwidth active open">
  <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">PRODUCT
  </a>
  <ul class="dropdown-menu">
    <li>
      <div class="mega-menu-content disable-icons">
        <div class="container" style="width: 100%">
          <div class="row equal-height">
            <div class="col-sm-12 no-padding">
              <div class="listproductmenu">
                <ul class="nav nav-tabs" id="myTab">
                  <li class="">
                    <a data-toggle="tab" href="#tab-0" aria-expanded="false">
                    ALL
                    </a>
                  </li>
                  <li class="">
                    <a data-toggle="tab" href="#tab-1" aria-expanded="false">
                    FILM
                    </a>
                  </li>
                  <li class="active">
                    <a data-toggle="tab" href="#tab-2" aria-expanded="true">
                    MUSIC
                    </a>
                  </li>
                </ul>
                <div class="tab-content" style="padding: 20px">
                  <div id="tab-0" class="tab-pane fade">
                    <div class="row">
                      <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
                        <a href="/product/Sonata">
                        Sonata
                        </a>
                      </div>
                      <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
                        <a href="/product/Elantra">
                        Elantra
                        </a>
                      </div>
                    </div>
                  </div>
                  <div id="tab-1" class="tab-pane fade">
                    <div class="row">
                      <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
                        <a href="/product/Sonata">
                        Sonata
                        </a>
                      </div>
                      <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
                        <a href="/product/Elantra">
                        Elantra
                        </a>
                      </div>
                      <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
                        <a href="/product/Accent">
                        Accent
                        </a>
                      </div>
                    </div>
                  </div>
                  <div id="tab-2" class="tab-pane fade active in">
                    <div class="row">
                      <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
                        <a href="/product/santa-fe">
                        Santa Fe
                        </a>
                      </div>
                      <div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
                        <a href="/product/Tucson">
                        Tucson
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</li>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To prevent event bubbling up the DOM tree, simply use stopPropagation within your click event handler.

$(document).on('click', '.dropdown-menu', function (e) {
    e.stopPropagation();
});

The purpose of stopPropagation is to prevent parent event handlers from being notified of the event by stopping it from bubbling up the DOM tree.

For more information, check out the reference here

$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});
var App = function () {
    // Implementation details for various functions mentioned above...
}();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="dropdown mega-menu-fullwidth active open">
  <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">PRODUCT
  </a>
  <ul class="dropdown-menu">
    <li>
      <div class="mega-menu-content disable-icons">
        <div class="container" style="width: 100%">
          <div class="row equal-height">
            <div class="col-sm-12 no-padding">
              <div class="listproductmenu">
                <ul class="nav nav-tabs" id="myTab">
                  <li class="">
                    <a data-toggle="tab" href="#tab-0" aria-expanded="false">
                    ALL
                    </a>
                  </li>
                  <li class="">
                    <a data-toggle="tab" href="#tab-1" aria-expanded="false">
                    FILM
                    </a>
                  </li>
                  <li class="active">
                    <a data-toggle="tab" href="#tab-2" aria-expanded="true">
                    MUSIC
                    </a>
                  </li>
                </ul>
                <div class="tab-content" style="padding: 20px">
                  <!-- Content for tab-0, tab-1, tab-2 goes here -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the Webstorm debugger in conjunction with node.js for seamless debugging

Several weeks ago, I attempted to get the webstorm debugger up and running, but unfortunately, it didn't work. Now, I'm giving it another shot, but I'm faced with the same outcome. I am following the instructions outlined here: http://www.j ...

javascriptnode.jsdebuggingwebstorm

Implementing JavaScript Functions to Trigger Control Key and Plus/Minus Events

In my project, I have a unique set of selectors called A+. By clicking on the A+ button, it has been programmed to initiate the control plus event. Similarly, within the same interface, I also have an A- button that activates the control minus event when ...

javascriptjquery

$scope.apply is triggering both "catch" and "then" handlers

I am trying to ensure that the content of a page in Angular 1.6.2 and UI router is only displayed once it has been confirmed on the server that the user has the appropriate role/permissions. It seems like without using $scope.apply(), the catch() function ...

javascriptangularjsangularjs-1.6

Using TinyMCE editor to handle postbacks on an ASP.NET page

I came up with this code snippet to integrate TinyMCE (a JavaScript "richtext" editor) into an ASP page. The ASP page features a textbox named "art_content", which generates a ClientID like "ctl00_hold_selectionblock_art_content". One issue I encountered ...

javascriptjqueryasp.nettinymce

Fixed position of Material UI tooltip popper when the word length increases

https://i.sstatic.net/mXcqy.png I am striving to replicate the image above by customizing the MUI tooltip properties, but instead, I am only able to achieve this result: https://i.sstatic.net/Rr79x.png By applying a margin to the popper element, I was a ...

javascriptreactjsmaterial-uicss-selectors

I attempted to use jQuery to render a partial view within my main view, but for some reason, the partial view does not show up at runtime

In the controller, there are actions defined: public ActionResult AdminRoles(int? selectedValue) { if (!LogedUser.InRole(Functions.User, Roles.View)) return RedirectToAction("Login"); return View(db.Users.Where(u => u.I ...

c#jqueryasp.net-mvchtml

Using Selenium to interact with a checkbox in a React component's ::before pseudo-element

I've been attempting to select a checkbox, and here are some of the methods I have tested: //label[string()=('Notify user')]/i //div[@class='b-checkbox'] //div[@class='b-checkbox']//label//input[@type='checkbox&apo ...

javahtmlreactjsselenium

Empower the user with the ability to interact through touch on dynamically

I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...

javascriptjqueryhtml

I want to retrieve a complete HTML page using an AJAX request

I am trying to retrieve the content of a specific page, but encountering issues when using this function: function getResult() { var url="http://service.semanticproxy.com/processurl/ftfu27m3k66dvc3r43bzfneh/html/http://www.smallbiztechnology.c ...

javascriptajaxopencalais

JavaScript enables Partial Views to load: Potential XSS vulnerability identified by HP Fortify

Fortify has identified a XSS vulnerability in my JavaScript function. I need help finding a solution since this method is heavily used in my app. I am attempting to use ajax to call a partial view and then append the resulting HTML to a specific DOM div e ...

htmlmodel-view-controllerxsspartial-viewsfortify

A comprehensive guide on publishing an application to Heroku using MongoDb/Mlab

I am encountering difficulties in deploying my Node.JS application to Heroku. I suspect that the issue lies with the database, but I cannot pinpoint the exact problem. I have attempted to switch from MongoDB Atlas to Mlab in hopes of resolving the issue, h ...

javascriptnode.jsmongodbherokumlab

What could be the reason for receiving no file input after submitting the form?

One of the functions triggers the input file and displays previews: $(document).on("change", "#Multifileupload", function() { var MultifileUpload = document.getElementById("Multifileupload"); if (typeof FileReader != & ...

javascriptjquery

Encountering unanticipated undefined elements while incorporating map in JSX

I'm attempting to dynamically generate <Audio> components using the map method: import React, { useState, useRef, createRef } from 'react'; const audios = [{ src: '/fire.mp3' }, { src: '/crickets.mp3' }]; function ...

javascriptreactjs

Tips for displaying only a list of folders in elfinder, a jquery file management plugin

Currently, I am working on enhancing the features of a file manager plugin that allows users to manage their folders effectively. One key functionality of the plugin is the ability for users to share specific folders with others. However, if a folder has n ...

javascriptphpjqueryhtmlelfinder

Retrieving the current date in React from a distinct date format

Does anyone know how to retrieve today's date in the following format using React? "2019020420" I have a function that currently retrieves the current date. How can I modify it to output the desired date format shown above? getCurrentDate( ...

javascriptreactjs

Set iframe or form to be in a fixed position

Having issues with my site where an iframe is contained within a div. When only one character is entered in the telephone box, validation fails and red warning text is displayed. Furthermore, after clicking in the email box and pressing tab twice, the fo ...

javascripthtmlcssiframe

Another option instead of using jQuery to retrieve the active element in the

My goal was to determine when the user is interacting with an INPUT or TEXTAREA element and set a flag variable to true during this engagement. Once the user clicks out of these elements, the flag should be set back to false. To achieve this, I utilized j ...

javascriptjquery

The button colors in Material Ui do not update properly after switching themes

React Material UI is being utilized in this project. Although the theme is being overridden, the colors of buttons and inputs remain unchanged. Here is how the Material UI theme is created in theme.js // @flow import { createMuiTheme } from '@materi ...

javascriptreactjsmaterial-ui

interval not functioning

When attempting to create a real-time chat function, I encountered an issue with setInterval not working properly. Here is the jQuery code I am using: $(function(){ setInterval(function() { $.ajax({ url: "./ajax/checknew.php", ...

phpjqueryajax

Tips on enlarging a webpage without showing the scroll bar on the main component

My goal is to create a webpage that resembles a window application. However, I've encountered an issue where zooming in on the page results in a scroll bar appearing on the main page. The parameters for the main page (the parent) are set as follows: w ...

cssreactjsflexboxmaterial-uiscrollbar