parent div 中的两个 Jquery 函数导致问题

Question

我有一个网站，其中有一个 div，我将其用作列表 header（通过使用 jQuery 和 HTML 代码关闭）。换句话说，如果有人单击此 "div"，它将显示一个新的 "child div"，然后有一个 sub-list 按钮。

我的问题源于此，虽然每个 jQuery 函数都独立运行得很好，但当将它们置于 parent/child 关系中时，事情会变得有点奇怪。

当 Parent "div" 打开时它工作正常，但是当按下 child sub-list 按钮时它显示 child 的隐藏"div" 但也关闭了之前显示的 parent "div" 给我留下了 'open' "child" 但关闭了 "parent"。

如果我再次打开 "parent div"，"child div" 已经打开，再次按下 "child div" 按钮关闭 "child div" 会同时关闭 parent和 child。

这是我的例子 html

 <div class="dropdown" href="javascript:void(0);">    
    <h3><a>TITLE</a></h3>
        <div class="Big2" style="display: none;">
           <div class="twocolumn">
           <div class="column facLeft">
             <a class="acBtn" href="javascript:void(0);">Read More</a>
               <div class="acBody" style="display: none;">
      <!-- insert text etc -->

这是我使用的jQuery代码[使用脚本标签放在头部：]

$(function(){
$('.dropdown').click(function(){
    if( $(this).hasClass('ake')){
        $(this).closest('.dropdown').find('.Big2').stop().slideUp(200,'swing');
        $(this).removeClass('ake');
    }
    else{
        $(this).closest('.dropdown').find('.Big2').stop().slideDown(100,'swing');
        $(this).addClass('ake');
    }
});
});

而这个叫 "child"

$(function(){
$('.acBtn').click(function(){
    if( $(this).hasClass('open')){
        $(this).closest('.column').find('.acBody').stop().slideUp(200,'swing');
        $(this).removeClass('open');
    }
    else{
        $(this).closest('.column').find('.acBody').stop().slideDown(100,'swing');
        $(this).addClass('open');
    }
});
});

尽管我是分别使用两个代码而不是将它们合并为一个（加上在 html 中调用它们）这一事实，但可能导致第二个代码影响第一个代码的原因是什么？ .closest 不会停在 DOM 树中吗？

Answer 1

您的 child 在 .dropdown 中，所以当您单击 child 时，您实际上也触发了 parent 单击

试试这样的东西

$('.dropdown').click(function(e){
if(!$(e.target).is('.acBtn')) {
    if( $(this).hasClass('ake')){
        $(this).closest('.dropdown').find('.Big2').stop().slideUp(200,'swing');
        $(this).removeClass('ake');
    }
    else{
        $(this).closest('.dropdown').find('.Big2').stop().slideDown(100,'swing');
        $(this).addClass('ake');
    }
    }
});

https://jsfiddle.net/r50bo5nr/

有关详细信息，请参阅 event bubbling

Answer 2

你需要使用stopPropagation()

$('.dropdown').click(function() {
  if ($(this).hasClass('ake')) {
    $(this).closest('.dropdown').find('.Big2').stop().slideUp(200, 'swing');
    $(this).removeClass('ake');
  } else {
    $(this).closest('.dropdown').find('.Big2').stop().slideDown(100, 'swing');
    $(this).addClass('ake');
  }
});

$('.acBtn').click(function(e) {
  e.stopPropagation();
  if ($(this).hasClass('open')) {
    $(this).closest('.column').find('.acBody').stop().slideUp(200, 'swing');
    $(this).removeClass('open');
  } else {
    $(this).closest('.column').find('.acBody').stop().slideDown(100, 'swing');
    $(this).addClass('open');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="dropdown" href="javascript:void(0);">
  <h3><a>TITLE</a></h3>
  <div class="Big2" style="display: none;">
    <div class="twocolumn">
      <div class="column facLeft">
        <a class="acBtn" href="javascript:void(0);">Read More</a>
        <div class="acBody" style="display: none;">abc

parent div 中的两个 Jquery 函数导致问题

Two Jquery functions within a parent div causing issues

html

javascript

jquery

parent-child