I am interested in implementing a "slide up" effect for the "slide menu" when it loses focus

When I focus out of the asmenu class, I attempt to trigger a 'slide up' effect. However, if I select two checkboxes from the child elements within the asmenu class, the focusout event is still triggered.

Ideally, I would like the 'slide up' function to only execute when I focus out after selecting multiple checkboxes within the asmenu class. Currently, if I select one checkbox and then try to select another one, the focusout event is triggered after the first selection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create_category">
  <div class="abmenu">
    <em>category</em>
    <div class="arrowbox">
      <span class="arrow_open"><i class="f0">open</i></span>
      <span class="arrow_close"><i class="f0">close</i></span>
    </div>
  </div>
  <div class="asmenu">
    <ul>
      <li>
        <a class="checkaside">
          <input type="checkbox" id="asidecate1" name="chk" value="POP">
          <label for="asidecate1">POP</label>
        </a>
      </li>
      <li>
        <a class="checkaside">
          <input type="checkbox" id="asidecate2" name="chk" value="ROCK">
          <label for="asidecate2">ROCK</label>
        </a>
      </li>
      <li>
        <a class="checkaside">
          <input type="checkbox" id="asidecate2" name="chk" value="R&B">
          <label for="asidecate2">R&B</label>
        </a>
      </li>
    </ul>
  </div>
</div>
$(".create_category .abmenu").on('click', function () {
  $(this).next(".asmenu").stop().slideToggle(300);
  $(this).toggleClass('on');
});

$(".create_category .asmenu").on('focusout', function (e) {
  $(".create_category .asmenu").slideUp(300);
  $(".create_category .abmenu").removeClass('on');
});

Answer №1

Here is an effective code snippet to achieve the desired functionality. By utilizing stopPropagation, you can prevent event propagation and ensure smooth operation.

Furthermore, clicking on ".asmenu" will trigger a focus out event on the document.

$(".create_category .abmenu").on('click', function () {
    $(this).next(".asmenu").stop().slideToggle(300);
    $(this).toggleClass('on');
});

$(document).on("click", function () {
    $(".create_category .asmenu").slideUp(300);
    $(".create_category .abmenu").removeClass('on');
});

$('.create_category').on('click', function (e) {
    e.stopPropagation();
});

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

Determine the altered props within the componentWillReceiveProps lifecycle method

During the process of debugging React code, it is common to come across situations where componentWillReceiveProps gets triggered unexpectedly, but identifying which prop change is causing this issue can be challenging. Is there a method available to easi ...

Markdown Custom Parsing

Every week, I create a digest email for my university in a specific format. Currently, I have to manually construct these emails using a cumbersome HTML template. I am considering utilizing Markdown to automate this process by parsing a file that contains ...

Is there still a need to preload dynamic images in the background?

Imagine you have HTML code that includes an image with a placeholder: <img class="lazy-load" src="http://via.placeholder.com/150/?text=placeholder" data-src="http://via.placeholder.com/150/?text=real%20image"/> At some stage, you want to implem ...

Preventing Jquery hover event from continuously triggering

Is there a way to make the opacity transition repeat with each hover? I need some assistance with this. $(document).ready(function(){ $(".item1").hover(function(){ $('.mask1').css({"visibility":"visible","opacity":"1"}); }, ...

Utilizing Async/Await with Node.js and Mongoose

Learning Promises and async/await programming is a new challenge for me, especially in the context of creating an API using Nodejs, Express, Mongoose, and MongoDB. While most tutorials focus on handling asynchronicity within a single file containing routin ...

The function you are trying to access is not Random-js

Everything was running smoothly, but now there seems to be a glitch. Node version - 10.4 Error: var random = require("random-js")(); ^ TypeError: require(...) is not a function Code: var random = require("random-js")(); ...

What is the process for encrypting data with javascript and decrypting it with php?

Looking for a way to encrypt data with a JavaScript function to use in a URL passed through an ajax GET request? For example, you could have encrypted data like TDjsavbuydksabjcbhgy which is equivalent to 12345: http://sample.com/mypage/TDjsavbuydksabjcbh ...

Working with jQuery.ajax Function Calls in Array Filter Operations with Javascript

My knowledge of AJAX calls is limited, so I am unsure about how they interact with array filtering using A.filter(). The array in question is used to populate a template synchronously. // An event triggers a function to filter a list on the page. // The f ...

Display the div without using javascript/jquery if the radio button is chosen

Could someone help me find a solution similar to the one mentioned here: If Radio Button is Selected Show Div I am specifically looking for a way to achieve this using only HTML and CSS, without involving JavaScript or jQuery. Any suggestions would be gre ...

losing track of the requested parameters while working asynchronously with Firestore documents

Today is my first time experimenting with firestore and express. Here is the code snippet I am using: app.post('/api/create', (req, res) => { (async () => { try { console.log(req.body); //the above consle.lo ...

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

After creating a website using Next.js and Tailwind CSS, I noticed that the site is appearing zoomed in when viewed in Firefox. However, it looks fine in all other browsers. When I adjust the screen to 80%, the website displays correctly in Firefox. What ...

What is the method for including a dynamic image within the 'startAdornment' of MUI's Autocomplete component?

I'm currently utilizing MUI's autocomplete component to showcase some of my objects as recommendations. Everything is functioning correctly, however, I am attempting to include an avatar as a start adornment within the textfield (inside renderInp ...

What could be causing my dynamic CMS forms to not load consistently?

Utilizing CKEditor to build the content input section of my CMS, which consists of a bar/menu at the top containing various options for users to create, edit, or delete entries on the website. Upon user selection, I send a request for form items to PHP us ...

Troubleshooting AngularJS $q Promise Not Being Returned

I have encountered an issue while trying to call a service method in AngularJS. The service method is being called successfully, but it is not returning any value to the controller function that invoked it. If anyone can offer assistance, I would greatly ...

Various CSS regulations for various languages/modes in CodeMirror

Can CodeMirror highlight different languages separately in multi-mode? .cm-s-default .cm-string-html {color: blue;} .cm-s-default .cm-string {color: #170;} Usually, CodeMirror applies the same class names for strings, comments, and other objects in all l ...

How to showcase content on bootstrap across varying screen dimensions

When designing my website, I envisioned having three different options presented upon entering the site. Depending on the size of the screen, I wanted to display varying content. For XL screens, I wanted all content to be visible, similar to the picture. ...

What is the minimum required node.js version for my project to run?

Is there a command in NPM that can display the minimum required Node version based on the project's modules? ...

Ways to merge the concepts of "if" and "if not

I've written a function that needs to run only if a certain condition is not true: $(window).width() > 990) !$('body').hasClass("home") I attempted combining them like this: if( $(window).width() > 990) && !$('body&apo ...

What is the best way to dynamically load a personalized JavaScript file for individual users depending on their PHP login credentials?

Currently, I am conducting a web-based experiment in which students log into a website to take practice tests for a class. Initially, the students land on a login page that includes the following code: include_once("core/config.php"); include_once("core/ ...

What steps can be taken to designate a personalized element for showcasing autocomplete options?

I want to change the way the suggested autocompletions are displayed by placing them in a separate div instead of showing them as a pop-up menu over the autocomplete widget. This decision was made because we are using autocomplete to alert users about pote ...