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);
      }
    }
});

这里是fiddle。

多级下拉列表

1 个答案: