Question

所以我要做的是：我有一个下拉的 parent 名为.has-sub > a，又名link。单击link后，将显示下拉菜单.dplst。当单击link和.dplst之外的任何元素时，我希望弹出警报功能，但是，仅当link时才弹出警报已被点击。所以我的问题出在我的jquery代码上。我的错误是，单击了link和.dplst之外的任何元素，并且未单击link时，将弹出警报功能。但是我只希望单击link时弹出它。如何使用当前代码执行此操作？请帮我。谢谢

编辑：基本上，这就是我想要的结果：

1）单击.has-sub > a

2）.dplst显示

3）单击任何不具有类.alerts和$(".alerts").children()的元素

4）.dplst现在隐藏

5）弹出警告对话框，显示“确定”

我要避免的事情：

1）不要这样做-跳过

2）不要这样做-跳过

[所以基本上，步骤3现在变成了步骤1]

3）单击任何不具有类.alerts和$(".alerts").children()的元素

4）不会发生-跳过

[步骤5变为步骤2]

5）弹出警告对话框，显示“确定”

$(document).ready(function() {
  $('.flx2 > div > a').click(function(e) {
    $(this).data('clicked', true);
    var checkElement = $(this).next();
    if((checkElement.is('.dplst')) && (!checkElement.is(':visible'))) {
      $('.dplst:visible').slideUp('normal'); 
      checkElement.slideDown('normal');
    }
    if($(this).closest('div').find('.dplst').children().length == 0) { 
      return true; 
    } else { 
      return false; 
    }
  });
});

$(document).ready(function() {
  $(document).mouseup(function(e) {
    if($('.flx2 > div > a').data('clicked')) {
      var dplst = $(".dplst");
      var alerts = $(".alerts").children().addBack();
      if (!dplst.is(e.target) && dplst.has(e.target).length === 0) {
        dplst.hide();
      }
      if (!alerts.is(e.target)) {
        $("button[name='altbut']").click();
      }
    }
  });
});

$(document).ready(function() {
  $("button[name='altbut']").on('click', function(e) {
    alert("ok");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="flx2">
  <div class='has-sub alerts'>
    <a href="">link</a>
    <div class="dplst">
      <a>text1</a>
    </div>
  </div>
</div>
<button name="altbut" type="button"></button>

Answer 1

好，让我先清除一下这里的情况，

因此要求是至少单击一次“链接”并且未单击“链接”或“ dplst”并且在“ .flx2”上单击时显示弹出窗口

如果我对要求的要求正确，则可以仅添加一个隐藏字段，将值设置为0，然后单击链接时将其更改为1。然后检查是否单击了.flx2和NOT（link OR dplst），然后检查隐藏值是否为1，然后显示弹出窗口，否则不显示。

您可以执行以下操作：

HTML

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <div class="flx2">
      <div class='has-sub alerts'>
        <a id="link" href="#">link</a>
        <div class="dplst">
          <input type="hidden" id="linkClicked" value="0"/>
          <a>text1</a>
        </div>
      </div>
    </div>
    <button name="altbut" type="button"></button>

JavaScript

$(document).ready(function() { 
 $('#link').on('click', function(e) {
   $('#linkClicked').val(1);
  });

   $(".flx2").click(function(e) {
        if($(e.target).is('.dplst') || $(e.target).is('#link')){
            e.preventDefault();
            return;
        }
        else if($('#linkClicked').val() == 1){
            alert("woohoo!");
         }

    }); 

});

上面的固定代码，也制造了一个小提琴 https://jsfiddle.net/63tgLz4u/

Answer 2

$(document).ready(function() {
  $('.flx2 > div > a').click(function(e) {
    $(this).data('clicked', true);
    var checkElement = $(this).next();
    if((checkElement.is('.dplst')) && (!checkElement.is(':visible'))) {
      $('.dplst:visible').slideUp('normal'); 
      checkElement.slideDown('normal');
    }
    if($(this).closest('div').find('.dplst').children().length == 0) { 
      return true; 
    } else { 
      return false; 
    }
  });
  
  $(document).mouseup(function(e) {
    if($('.flx2 > div > a').data('clicked')) {
      var dplst = $(".dplst");
      var alerts = $(".alerts").children().addBack();
      if (!dplst.is(e.target) && dplst.has(e.target).length === 0) {
        dplst.hide();
        //set link data click to false
        $('.flx2 > div > a').data('clicked', false)
      }
      if (!alerts.is(e.target)) {
        $("button[name='altbut']").click();
      }
    }
  });
  
  $("button[name='altbut']").on('click', function(e) {
    alert("ok");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="flx2">
  <div class='has-sub alerts'>
    <a href="">link</a>
    <div class="dplst">
      <a>text1</a>
    </div>
  </div>
</div>
<button name="altbut" type="button">button</button>

不知道此匹配项是否符合您的要求，您的描述太乱了... 有几个问题： 1.如果下拉菜单是隐藏的，单击链接时是否要显示弹出窗口？我将// set链接数据单击添加为内部代码中的false。

仅当以前的点击侦听器被触发时，才如何触发点击侦听器？

2 个答案: