Content or search drop-down close on click

Support
#1

Hello
Is there a way to get some elements (content dropdown and search dropdown) to close when anything else on the page is clicked? Off-canvas elements like navigation and search do this. How do we get the dropdown elements to do the same?
Thank you.

#2

Hi there,

Our Drop-downs do not have such a functionality. I may be able to suggest a Javascript code regarding this but there is not a 100% guarantee of working. I need to have access to the URL of the page you are talking about and you need to mention the dropdown in question.

If you use the Pro theme you need to add a Custom Class to the Navigation Inline element by clicking the Customize tab so that I have a class to be able to select the menu.

Thank you.

#3

http://htccf.develop.edgeephotography.com/eauclaire/

The two elements are the search dropdown (in mobile) and the content dropdown (service times).

Thank you!

#4

Hi There,

Please try adding this custom JS under Pro > Theme Options > JS:

jQuery(function($){
	$(document).on('click touchend', function(event){
		if($('.x-dropdown.x-active').length > 0){
			$('.x-dropdown, .x-anchor-toggle').removeClass('x-active x-interactive');
		}
	});
});

Let us know how it goes!

#5

Thank you for the solution! It is very close to working. I noticed something:
If I click a dropdown and then click elsewhere, the dropdown closes just as intended.
I have to click the same dropdown twice for it to show up again. This behavior happens for each element.

ex:

  1. click ‘service times’
  2. click anywhere else (‘service times’ closes)
  3. click search dropdown (the dropdown is only visible on smaller resolutions when the hamburger menu is visible)
  4. click anywhere else (search closes)
  5. click either element again, neither will open
#6

Hey There,

Thanks for updating in! Please have the JS code updated and use this instead:

jQuery(function($){
	$(document).on('click touchend', function(event){
		if($('.x-dropdown.x-active').length > 0){
			$('.x-dropdown, .x-anchor-toggle').trigger('click');
		}
	});
});

Hope this helps. Please let us know how it goes.

#7

I think that made things worse. Clicking any blank space after clicking a dropdown now triggers click events on my off-canvas navigation and off-canvas login simultaneously.

#8

Hey There,

Sorry there was a missing class in the code above. You can use this instead:

jQuery(function($){
	$(document).on('click touchend', function(event){
		if($('.x-dropdown.x-active').length > 0){
			$('.x-dropdown.x-active, .x-anchor-toggle.x-active').trigger('click');
		}
	});
});

Hope this helps.

2 Likes
#9

That worked.
Thanks so much!

#10

You’re more than welcome, glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.