jQuery向特定的li id和class添加一个简单的data属性

Question

This probably won't excite anyone too much but I thought I'd ask as I've tried a number of ways to do this. I am just trying to add a data attribute to a menu item which activates the drop-down facility in the nav in Wordpress. (UIKit CSS/JS) The HTML for the element is

 <li class="uk-parent" data-uk-dropdown="{mode:'click'}">

The uk-parent class has already been added as have the sub ul classes necessary for it to work, leaving just the data-uk-dropdown mode to be added. I've tried addClass, appendTo and a few others but can't get it to register. The id of the li is "menu-item-140" and I only need to target this one, not any others. So typically I have at the moment, going back to addClass (but it's not really a class.) as below:

jQuery(document).ready( function($) {
$("#menu-item-140.uk-parent").addClass("data-uk-dropdown='{mode:'click'}");
$('.sub-menu').addClass('uk-dropdown uk-dropdown-navbar');
});

before trying to add the data-uk-dropdown, the .sub-menu classes showed up fine, but as it is at present this actually makes the sub item disappear from the menu altogether, leaving just the parent items.

Any Tips welcome, Thanks

Answer 1

addClass用于添加类，以实际添加属性，使用attr

$("#menu-item-140.uk-parent").attr("data-uk-dropdown", "{mode:'click'}");