多级下拉

Question

嗨，我正在开发一个jquery脚本来处理对下拉元素的多次单击。

脚本根据数据属性添加和删除类，并在外部单击时将其删除。

问题是：

如果我在另一个元素中嵌套一个类来切换，然后单击它，则父元素会删除它的类。我希望家长保留它的类，并应用孩子所需要的类。

我怎么才能阻止这一切？

我只有一条规则，绝对不使用e.stopPropagation().

我已经看到了很多使用stopPropagation方法的片段和脚本，如果我有其他脚本与元素交互，这是很危险的。

提前谢谢你的帮助。

​

jQuery(function() {


  var toggled = [];

  jQuery('.js-toggle').each(function() {

    var el = jQuery(this),
      toToggle = el.attr('data-toggleClass');

    el.on('click', function(e) {

      if (el.hasClass(toToggle)) {

        el.removeClass(toToggle);
        el.removeClass('is-active');

        toggled.pop();

        

      } else {

        el.addClass(toToggle);
        el.addClass('is-active');

        if(toggled.indexOf(toToggle) === -1 ){

          toggled.push(toToggle);

        }

        

      }

    });

  });

  jQuery(document).on('click', function(e) {

    var targetEl = jQuery(e.target),
        
        toToggle = targetEl.attr('data-toggleClass'),
        
        lastToggled = toggled[toggled.length - 1],
        
        toggleType = jQuery('.js-toggle').attr('data-toggleType');

    if (!targetEl.is('.js-toggle') && !targetEl.is('.js-toggle *')) {

      switch (toggleType) {

          case 'all':

              jQuery('.js-toggle').each(function(){
                var el = jQuery(this),
                    elClass = jQuery(this).attr('data-toggleClass');

                el.removeClass(elClass);
                el.removeClass('is-active');

                toggled.pop();

                

              });

            break;

          case 'reverse':

            jQuery('.' + lastToggled).removeClass(lastToggled);

            toggled.pop();

            

            break;

        }

    }

  });

});

      .box{
        width: 100px;
        height: 100px;
        display:inline-block;
        background: black;
        margin-right: 10px;
        position: relative;
      }
      .box .box{
        width: 20px;
        height: 20px;
        position: absolute;
        bottom:0;
        left:0;
      }
      .box.active{
        background: darkred;
      }
      .box.test-1{
        background: darkblue;
      }
      .box.test-2{
        background: darkgreen;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <div class="box js-toggle" data-toggleClass="active" data-toggleType="all">
        <div class="box js-toggle" data-toggleClass="test-1">

        </div>
      </div>

        <div class="box js-toggle" data-toggleClass="test-2">

        </div>

          <div class="box js-toggle" data-toggleClass="test-1">

          </div>

​

Answer 1

您可以使用e.stopPropagation()；来防止事件在DOM树上冒泡。您还可以删除.each()，因为.on()已经绑定到具有给定类的所有元素。

示例：

$('.js-toggle').on('click', function(e) {
    e.stopPropagation();
    toToggle = $(this).attr('data-toggleClass');
    if ($(this).hasClass(toToggle)) {
      $(this).removeClass(toToggle);
      $(this).removeClass('is-active');
      toggled.pop();
    } else {
      $(this).addClass(toToggle);
      $(this).addClass('is-active');

      if(toggled.indexOf(toToggle) === -1 ){
        toggled.push(toToggle);
      }
    }
});

这是一个小提琴。