Question

暂时在这个问题上摸不着头脑。基本上我有一个外部div容器，当点击该div时，我试图改变它下面的下面： div class =＆＃34; selected＆＃34; （哪个有效） ul.more我试图滑动切换和我试图切换类的图标.toggleClass

ul和图标未触发。不知道我在这里做错了什么。奇怪的是，当我将触发器从div切换到图标时，我实际上可以切换图标上的类和隐藏的ul。但由于某些原因，当我触发时，div都会继续失败。

Jfiddle：http://jsfiddle.net/LDad5/1/

以下代码：

css：

ul.more {
display: none;
}

HTML：

<div class="wtf"> <div> <i class="icon-ygg-chevron-right"><span class="docu-title">Lorem ipsum dolor sit</span></i> <ul class="more actu-landing-list"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis mauris id dolor tincidunt cursus. Aliquam elementum malesuada purus, at porttitor risus viverra quis. In sit amet sagittis nibh. Suspendisse hendrerit mi risus, a rhoncus nunc ultricies quis. Nullam a posuere felis. Nunc aliquam odio mauris, ut porta diam cursus a. In elementum molestie sem, id aliquet nunc dignissim nec. Sed in elit a elit faucibus accumsan a vel dui. Sed vel ante et mauris tempor accumsan. Cras velit nunc, tempor nec venenatis non, ullamcorper at diam. Donec non odio aliquet, fermentum erat eget, rhoncus nisi. Pellentesque urna neque, mattis a consectetur volutpat, tincidunt non nisl. Curabitur pulvinar viverra tellus, faucibus hendrerit arcu elementum nec.</li> </ul> </div> </div>

JS：

$(document).ready(function() {
    $('.wtf div').on('click', changeCarrotClass3);
});

function changeCarrotClass3() {


    $(this).toggleClass("selected");

    $(this).next('ul').slideToggle(400);

    $(this).next('i').toggleClass("icon-ygg-chevron-down");

}

Answer 1

.next()字面上只关注下一个元素。您希望使用查看后代的.find()，因为<i>和<ul>是点击div的后代：

function changeCarrotClass3() {
    $(this).toggleClass("selected");
    $(this).find('ul').slideToggle(400);
    $(this).find('i').toggleClass("icon-ygg-chevron-down");
}

<强> jsFiddle example

jquery在点击时更改多个元素

1 个答案: