CODEWITHSUNDEEP
jquery
Adam Pavlov
Adam Pavlov

Reputation: 307

Dropdown-menu should collapse on LINK click

In my navbar, I used HEADING, PARAGRAPH, and LINKS in dropdown-menu. On click LINK, dropdown-menu collapse as its default behavior, it's fine. But when I click on HEADING or PARAGRAPH or ANYWHERE on the dropdown area then dropdown-menu should visible. There are some lengthy paragraphs that users prefer to select to read or copy.

JSFiddle Demo

                                   <div class="row">
                                      <div class="col dd-meta">
                                       <h5>Our Organization</h5>
                                       <p>Our story, mission, team and more</p>
                                       <a class="link-meta" href="javascript:;">Know more about us</a>
                                      </div>

                                      <div class="col dd-meta">
                                        <ul class="link-common">
                                          <li><a href="javascript:;">Action</a></li>
                                          <li><a href="javascript:;">Action</a></li>
                                          <li><a href="javascript:;">Action</a></li>
                                          <li><a href="javascript:;">Action</a></li>
                                        </ul>
                                      </div>

                                      <div class="col dd-meta">
                                       <h5>Our Organization</h5>
                                       <p>Our story, mission, team and more</p>
                                       <a class="link-meta" href="javascript:;">Know more about us</a>
                                      </div>

                                    </div>

Upvotes: 1

Views: 433

Answers (1)

msg
msg

Reputation: 8181

You can check if the element beign clicked is a link, otherwise stop propagation of the event to prevent the dropdown events from firing:

$('.nav-item').on('click', function(e) {
  if ($(e.target).is(':not(a)')) {
    e.stopPropagation();
  }
})

This can cause problems if you depend in events propagating for other behaviors.

Upvotes: 1

Related Questions