Concealing collapsible Bootstrap 4 navbar with a single click

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="myNavbar">
    <div class="container">
      <a class="navbar-brand" href="#Home"></a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon active"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#Home">Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#About">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#Contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

I have attempted the following code solution:

    $('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

However, when I implement this code, I encounter the issue depicted in the image here.

This code snippet was found on Stack Overflow, but I am unsure why it is not functioning correctly for me. Can anyone provide insight into what may be causing the problem?

javascriptjqueryhtmlcssbootstrap-4

Answer №1

Consider using the code snippet $('.navbar-collapse').hide(); as a more efficient alternative to 

$('.navbar-collapse').collapse('hide');
. If you need the navbar to toggle its visibility based on its current state, you can achieve this with $('.navbar-collapse').toggle();

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

Sparse planeBufferGeometry in THREE.js is a specialized type of geometry that

I am currently working with a file that contains sparse elevation data derived from GPS information. I have been utilizing this data to fill a PlaneBuffer array with elevations. var vertices = new Float32Array( (grid.NCOL*grid.NROW) * 4 ); for (var i = 0, ...

javascriptthree.jsgisarcgis-js-api

Incorporate JSON when adding a new row to the database using Ruby On Rails

Greetings, fellow developers! I am currently working on an application with a backend in Rails. My goal is to create a user from an AJAX request and have the server return a JSON object containing the newly saved user information. Below is my Rails code s ...

javascriptruby-on-railsjson

I'm looking to extract only two specific keys along with their values from an array stored in a PHP session. I want to transfer this data to a hidden input and then

I have a digital shopping cart where I store selected product data as arrays in session memory. Here is an example of what the arrays look like in the session: Array ( [4] => Array ( [name] => Organic Essential Iodine Supplement ...

phpjqueryarraysajaxsession

What's the process for creating a synchronous function in AngularJS?

Is there a way to make storyboard.getAdressTimeLine run synchronously? I need storyboard.drawTimeLine to continue executing only after storyboard.getAdressTimeLine is done for (var i = 0; i < response.data.length; i++) { var obj=response.data[i]; var d ...

javascriptangularjs

What is the process for converting a string into a JSON object?

There is a string that looks like this: //string " { "1" => "one stuff\n print 'hi'.. ", "2" => "two stuff\n print 'by' "} " What steps should be taken to convert it into a JSON object in order to access its ...

javascriptjqueryruby-on-railsjson

How can you store JavaScript objects to files, including their methods, in a Node.js environment?

In reading about saving objects to files in Node.js here on Stack Overflow, I understand the process. However, I am curious if there is a method that allows for writing an object in a manner that would enable me to reload the object into memory along wit ...

javascriptnode.js

Generating a JSON tree hierarchy from an array of nested objects

I have a JSON array of objects that looks like this: [{ "vehicleid": 3, "name": "Teste2VDD", "brand": "Scania", "model": "6x2", "class": "class1", "region": "Curitiba", "customer": "Cliente A", "customerid": 1 }, { "veh ...

javascriptjsontree

The process of passing $refs in Vue explained

I have a feature where all the data is passed to the child component. Currently, I am able to pass $attrs and $listeners successfully: <template> <el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition"> <slot /> ...

javascriptvue.js

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

If I have a Json File structured like this: {"403": [ { "403-01-01": "219,00" }, { "403-01-02": "180,00" } ], "404": [ { "404-01-01": "26,00" }, {"403-01-02": " ...

javascripthtmlarraysjson

Webpage Text Animation

This is the visual representation of my webpage: https://i.stack.imgur.com/tYq34.png I am seeking to implement a uniform animation effect for the text "Carlos Qiano" and "Lorem Ipsum", similar to the link below: https://i.stack.imgur.com/XVnBS.jpg Note: ...

javascripthtmljquerycssanimation

Retrieve the footer of a RadGrid nested within a NestedViewTemplate for a child

I am working with a RadGrid that has expandable rows, each of which contains a RadGrid within a NestedViewTemplate. These child RadGrids have visible footers and a few columns, one of which is "DtlTransAmount": <NestedViewTemplate> <asp:Panel ...

javascriptc#asp.nettelerikradgrid

Generate a unique splatter design using Cascading Style Sheets

Imagine a circle link that transforms into a playful animation with a pink shape when you move your mouse over it: I'm torn between different ideas on how to achieve this effect. One approach could be to use individual elements for each drop, utilizi ...

javascriptjqueryhtmlcss

Loading Ajax causes the content to duplicate

My website is created using Wordpress as the CMS with an index featuring a long accordion-style list of post titles. Clicking on a heading loads the content for that post via Ajax onto the index page. However, I am encountering an issue where clicking a h ...

javascriptphpjqueryajaxwordpress

Regular expressions that identify text located at the conclusion of a URL

Although the title may not be entirely appropriate, my goal is to create a regex that will remove any trailing '/' at the end of a URL under certain conditions. For example: http://stackoverflow.com/questions/ask/ to http://stackoverflow.com/qu ...

jqueryregextypescript

Allowing CSS to break long words but not spaces for better readability

Imagine you have the following paragraph: thisisaverylongwordthatneverbreaks Applying word-wrap:break-word; results in: thisisaverylongwordthat neverbreaks This works well, but what if I try: this is avery long word that has spaces The output becom ...

cssline-breaks

How can I retrieve the file paths within a designated directory and store them in a JavaScript array?

Imagine having a website at this location: https://example.com with a directory inside it called: https://example.com/directory We only know about the existence of the directory folder, but we don't have information on its subfolders. How can we ret ...

javascriptphpjqueryajax

Looking for a jQuery Gantt Chart that includes a Treeview, Zoom functionality, and editing capabilities?

I am in need of integrating a dynamic Gantt Chart tool into a room booking solution using jQuery. The Gantt chart should be highly interactive, allowing for drag-and-drop functionality, a tree view on the left to group tasks, and a zoom feature for adjusti ...

javascriptjquerychartsgantt-chart

Code for Rotating the Wheel - MINUS javascript

Exploring the possibility of creating a spin the wheel effect like this using only HTML and CSS, no Javascript involved Seeking references or examples to determine feasibility. ...

htmlcsshtml5-canvas

Tips for handling numerous buttons in ionic?

I'm currently working on an app that includes surveys. In this app, users are required to answer by selecting either the Yes or No button. The desired behavior is for the chosen button to turn blue once clicked, while the other button should maintain ...

htmlcssangularionic-framework

Text not aligned with Line Height

I'm currently working on centering two spans horizontally within a 150px div. My initial thought was to set the line-height of each span to 150px, but for some reason, the text isn't aligning properly using this approach. Below is the code I hav ...

csshtml