Question

当我点击“第一个孩子”时，在此处的演示中http://jsfiddle.net/ewk9jmxx/2/或者＆＃39;第二个孩子＆＃39;它在蓝色和红色之间切换。但是，当我点击＆＃39; +＆＃39;符号（span）除了＆＃39; First Child＆＃39; ;颜色不切换。如何在两种条件下进行切换，即。当我点击“第一个孩子”时，我点击了跨度。元件

我的HTML结构如下：

<ul id="Budor">
<li class="L-1">First
    <span class='jor'>+</span>
    <ul>
       <li class="L-2">First Child
           <span class='jor'>+</span>
          <ul>
              <li>abc</li>
              <li>xyz</li>
          </ul>
        </li>

以下是代码：

$('#Budor li').on('click', function (e) {
    e.stopPropagation(); 
    $(this).children('ul').slideToggle('slow', function () {                    
        $(e.target)
            .toggleClass('opened', $(this).is(':visible'));
    });                
});

Answer 1

$('#Budor ul').addClass('handle closed');

$('#Budor li').on('click', function (e) {
    event.stopPropagation(); // don't close parent on child click
    $(this).children('ul').slideToggle('slow', function () {                    
        if($(e.target).is('li')) // if clicked on First
            $(e.target).toggleClass('opened', $(this).is(':visible'));
        else if($(e.target).is('span')) // if clicked on + (child of First)
            $(e.target).parent('li').toggleClass('opened', $(this).is(':visible'));

    });                
});

Answer 2

问题是当点击+时，事件目标指向span元素，所以我们需要进行元素类型检查，以便我们只在其元素＆＃39; li＆＃39;时更改类。查找以下更新的代码。 HTH -

$('#Budor ul').addClass('handle closed');

$('#Budor li').on('click', function (e) {
    e.stopPropagation(); // prevent links from toggling the nodes
    $(this).children('ul').slideToggle('slow', function () {                    
        if ( $(e.target).is( "li" ) ) {
            $(e.target)
            .toggleClass('opened', $(this).is(':visible'));
        } else {
            $($(e.target).parent())
            .toggleClass('opened', $(this).is(':visible'));
        }
    });                
});

Modified Version Link on jsFiddle

Answer 3

我试图简化一些事情：

$("#Budor").addClass('closed');

$('#Budor').click(function (e) {
    $(e.target).find('ul').slideToggle('slow', function () {
        $(e.target).toggleClass('opened');
    });    
});

点击此处：http://jsfiddle.net/ewk9jmxx/11/

修改

这是更新版本。对不起，我还没有注意到这个细节：

$("#Budor").addClass('opened'); $('#Budor').click(function (e) { $(e.target).find('ul').slideToggle('slow', function () { $(e.target).toggleClass('closed'); }); }); $('#Budor span').click(function (e) { $(e.target).parent('li').trigger('click'); });

这是更新的jsfiddle：http://jsfiddle.net/ewk9jmxx/16/

在Span和List Item上切换两者

3 个答案: