Question

我需要在bootstrap上构建下拉菜单，但我没有选择在<ul>和<li>元素上更改manualy类，我从cms获取它们并且必须向我知道的元素添加类如何更改类但不知道如何添加类似这样的类元素：

将'some class'添加到'li'，其中5个孩子是ul 将类'some class'添加到'a'，其中parent具有'some class' 将属性'some attr'添加到'a'，其中parent有'some class' 将类'some class'添加到'ul'，其中parent是li

就像我在这里感到难过的是代码。

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
    <li class="menuElement menuElementN1 menuElement_1_1 menuElementFirst">
        <a class="menuElement menuElementN1 menuElement_1_1 menuElementFirst" href="http://xxx/start.html"><span class="menuElementLinkBefore"></span><span class="menuElementLink">Start</span><span class="menuElementLinkAfter"></span></a>              
    </li>
    <li class="menuElement menuElementN1 menuElement_1_6 active"> <----- nedd to add here class 'dropdown'
        <a class="menuElement menuElementN1 menuElement_1_6 menuElementSelected" href="#"> <--- here i need    data-toggle="dropdown"   and class 'dropdown-toggle' <span class="menuElementLinkBefore"></span><span class="menuElementLink">Pages</span><span class="menuElementLinkAfter"></span></a>     
        <ul>  <--- need to add here     class="dropdown-menu"
            <li class="menuElement menuElementN2 menuElement_2_1">
                <a class="menuElement menuElementN2 menuElement_2_1" href="http://xxx/page1.html"><span class="menuElementLinkBefore"></span><span class="menuElementLink">Page 1/span><span class="menuElementLinkAfter"></span></a>
            </li>
            <li class="menuElement menuElementN2 menuElement_2_2">
                <a class="menuElement menuElementN2 menuElement_2_2" href="http://xxx/page2.html"><span class="menuElementLinkBefore"></span><span class="menuElementLink">Page 2</span><span class="menuElementLinkAfter"></span></a>
            </li>
            <li class="menuElement menuElementN2 menuElement_2_3">
                <a class="menuElement menuElementN2 menuElement_2_3" href="http://xxx/page3.html"><span class="menuElementLinkBefore"></span><span class="menuElementLink">Page 3</span><span class="menuElementLinkAfter"></span></a>      
            </li>
        </ul>
    </li>
</ul>
</div>

Answer 1

尝试

jQuery(function ($) {
    var $lis = $('.menuElement').has('ul').addClass('dropdown');
    $lis.children('a').addClass('dropdown-toggle').attr('data-toggle',"dropdown").dropdown();
    $lis.children('ul').addClass('dropdown-menu');
});

演示：Fiddle

Answer 2

这将在你的UI中添加id和class

$('.menuElement_1_6 > ul').addClass('yourClassname').attr('id', 'yourId');

Answer 3

试试这个：

$('.nav').find('li.active').addClass('dropdown'); 
// add the class to active li
$('li.active').find('a').attr('data-toggle', 'dropdown') // add attr to <a>
                        .addClass('dropdown-toggle'); // add the class to <a>
$('li.active').find('ul').addClass('dropdown-menu'); 
// find the ul in active li and add the class

定位li上的.active类并按上述方法进行操作，但我想知道你想在页面加载或任何dom节点的onclick上做这些操作。

Answer 4

$('.navbar-collapse.collapse > ul > li:eq(1):has(ul)').addClass('dropdown')
    .children('a').addClass('dropdown-toggle').attr('data-toggle', "dropdown")
    .next('ul').addClass('dropdown-menu');

jquery将类添加到父级

4 个答案: