主页 / 问题 / 1575629
Accepted
maindenis
Asked:2024-04-11 06:06:55 +0000 UTC2024-04-11 06:06:55 +0000 UTC

忽略点击事件

  • 772

当您单击“打开”按钮时，dr_content 下拉列表不应退出，并且按钮上的单击事件应触发。如果他们点击 dr_title 那么 dr_content 就会退出。我在 JS 中找不到错误。

$(".dr_title *").on("click", function(e) {
    countPills = $(this).closest(".inlines_pills").length;
    console.log(countPills);
    if(countPills >= 1) {
        e.preventDefault();
    } else {
        parent = $(this).closest(".dr_item");
        sl = parent.find(".dr_content");
        if(sl.is(":hidden")) {
            parent.addClass("active");
            sl.slideDown(300);
        } else {               
            sl.slideUp(300);
            setTimeout(function() {
              parent.removeClass("active");
            },500);
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="dr_title">
    <div class="inlines_pills">
        <a href="#" class="transparent_pill">Open</a>
    </div>
</div>
<div class="dr_content">
    <p>partnersTrafficPrice</p>
</div>

javascript

1 个回答

  1. Best Answer

    当您单击“打开”按钮时，dr_content 下拉列表不应退出，并且按钮上的单击事件应触发。如果他们点击 dr_title 那么 dr_content 就会退出。

    关于作者给出的例子，可以这样实现......

    $(".dr_title *").on("click", function(e) {
  if ($(e.target).hasClass('transparent_pill')) {
    alert('Клик "по кнопке" сработал')
    e.stopPropagation()
    return
  }
  $(this).parent('.dr_title').next('.dr_content').toggle()
});
    .dr_title {
  border: 1px solid;
}

.dr_content {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="dr_title">
  <div class="inlines_pills">
    <a href="#" class="transparent_pill">Open</a>
  </div>
</div>
<div class="dr_content">
  <p>partnersTrafficPrice</p>
</div>

    • 0

相关问题