I am having some minor issues while working with jquery. The code below is supposed to open the submenu list when the user clicks on the menu item. But when the user clicks on one of the menu items, it opens all other submenus as well:
$(document).ready(function(){
$(".mobile-main-menu-item-container").click(function(){
$(".mobile-main-menu-subitem-list-container").slideToggle();
});
});
I have to tell that I am not surprised that it is acting like that, because the same class is used for all menu items. I just want to ask what I have to change in the code so that only one submenu is opened. For sure, there is a better way to write the code instead of assigning different ID-s for each of them.
Thanks in advance for your help.
Inside the click function, use this to isolate the scope of your subitem class to only children (and grandchildren, etc.) of the item clicked.
$(document).ready(function(){
$(".mobile-main-menu-item-container").click(function(){
$(this).find(".mobile-main-menu-subitem-list-container").slideToggle();
});
});
Related
I am using a AJAX search plugin for Wordpress that displays in my mobile menu by targeting a specific menu ID (menu-item-6101). Everything works great, but when I click on it the menu is dismissed (which prevents you from doing any searches, the expected behaviour is for the menu to stay visible while typing).
I have spent a number of hours researching, and it seems that there is an onclick event attached to the <a> of that menu item that is likely causing the menu to be dismissed (note that none of the other parent -> child toggles cause this, only this menu item that the search plugin is using to display a search box).
I have tried every single variation of event.preventDefault();, event.stopImmediatePropagation(); & event.stopPropagation();, as well as trying to remove the listener, send it to null, etc. but unfortunately I am having issues with either the targeting (e.g. fetching the ID, and then targeting the <a>, or it is being overridden due to the javascript load order.
I have also tried to make an onclick event for that menu item div that forces the mobile menu to stay visible (the menu gets style="display:none;" added to when when focus is changed), so I thought perhaps that would be a different approach:
jQuery('div.proinput').click(function(){
var element = document.getElementById('#mobile_menu');
element.style.removeProperty("display");
jQuery('.et_mobile_menu').css({
display: inline-block !important;
});
});
I would really appreciate it if someone could help me.
Thanks!
I think the menu toggle is actually being fired by the div#ajaxsearchpro3_2 inside de anchor. Try with this (assuming the div will allways have the same ID):
FIXED
document.getElementById('ajaxsearchpro3_2')
.addEventListener('click', function(e) {
e.stopPropagation();
});
The final solution is:
jQuery(".et_mobile_menu .menu-item a").not(".toggle-menu").off("click");
Hope that this helps someone :)
I have been reading many posts about toggling an icon and I got some code to work but it only works for one item and I have 23 of them.
Basically, it's an accordion of FAQ's and when you click on it the answer shows but I want a plus and minus sign to show and toggle depending on if it's collapsed or not.
I found this code and updated with my site and it works but only for the first FAQ.
$("#switch").click(function(event) {
$(this).find('i').toggleClass('fa-plus-square').toggleClass('fa-minus-square');
});
What do I need to do to make it so they all change?
I thank you in advance for your time.
Only one item on the page can have the id switch. Change this to a class and select using $('.switch') to apply the event to each item.
I have a menu and when I click a link that has a submenu, I want to toggle it. And I did that, however I have more submenus with the same class and when I click one all of them toggles.
I managed to toggle only the clicked element but in this case I need to toggle the children.
Here is the js code I have:
$('li.has-submenu a.link').click(function() {
$('.submenu').slideToggle(500);
});
And here is a quick fiddle of the situation:
http://jsfiddle.net/TV5Kk/
Thanks!
jsFiddle DEMO
$(this).next('.submenu').slideToggle(500);
Since you have multiple elements with class submenu use $(this) to get the relative element. In your mark up, the next element to the link happens to be one you wanted to toggle.
UPDATE:
Since OP wants to automatically slide up all others.
DEMO here
$('li.has-submenu a.link').click(function() {
$('.submenu').slideUp(500);
$(this).next('.submenu').slideToggle(500);
});
I'm using the following tutorial: http://www.script-tutorials.com/css3-metal-menu-with-icons/
The problem is that when I click any element on the submenu, the submenu won't close. My app is using a jQuery UI tab to dynamically add a tab with the content as one partial view (mvc4) so that the app page isn't reloaded. I would like to hide the submenu when an item is clicked, how can i do that?
The submenus are all located in a div with class named subs. You could hide that with JQuery.
$('html').click(function() {
$(".subs").hide();
});
All clicks, anywhere should now hide the submenus or any other element with the class subs
Since you're using jQuery, I would do something like traversing the parents if you know the exact depths, using a click event handler (where e is the event):
$(e.target).parent().parent().hide(), etc
If it could be dynamic, you can do it slightly less efficiently, but in one go:
$(e.target).parents('.thedropdownmenuclass').hide()
I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55
It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.
Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.