Question

我有一个网站，它有一个div，我用它作为列表标题（通过使用jQuery和HTML代码关闭）。换句话说，如果有人点击这个＆＃34; div＆＃34;它将显示一个新的＆＃34; child div＆＃34;然后有一个子列表按钮。

我的问题源于此，虽然每个jQuery函数都可以完全独立运行，但是当它们处于父/子关系中时，事情会变得有些奇怪。

当父母＆＃34; div＆＃34;打开它工作正常，但是当按下子子列表按钮时，它会显示孩子的隐藏＆＃34; div＆＃34;但也会关闭之前显示的父母＆＃34; div＆＃34;给我一个开放的＆＃39; ＆＃34;子＆＃34;但是一个封闭的父母＆＃34;。

如果我打开＆＃34;父div＆＃34;再次＆＃34;孩子div＆＃34;已经开放，再次按下＆＃34; child div＆＃34;按钮关闭＆＃34;子div＆＃34;关闭父母和孩子。

这是我的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');
    }
});
});

这个叫＃34;孩子＆＃34;

$(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调用它们）可能导致第二个代码影响第一个代码的事实？是不是在DOM树中停止了.closest？

Answer 1

您的孩子在.dropdown内，所以当您点击该孩子时，您实际上也会触发父点击

尝试类似这样的事情

$('.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

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

2 个答案: