主页 / 问题 / 760837
Accepted
Anton Essential
Asked:2020-12-20 15:50:50 +0800 CST2020-12-20 15:50:50 +0800 CST

如何切换toggleClass？

  • 772

下午好，有一个 toggleClass 函数可以在单击时附加和删除一个类，我有两个下拉列表，有些东西很困惑，告诉我如何正确删除或删除跨度上的点击标签，跨度上的那些点击打开了一个如果菜单打开并单击另一个跨度，则单击同一跨度会关闭菜单，则当前菜单会被单击的菜单关闭。

$('span').click(function() {
  $(this).closest('.parent').not(this).removeClass('active')
  $(this).closest('.parent').toggleClass('active');
});
.active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

jsfiddle

jquery

2 个回答

  1. Best Answer

    $('span').click(function() {  
  $(this).closest('.parent').siblings().find('.dropdown').removeClass('active');  
  $(this).next().toggleClass('active');  // $(this).closest('.parent').find('.dropdown').toggleClass('active');
});
    .active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

    该类应附加到父级而不是下拉列表，因为父级继承了跨度

    它的意思是这样的：

    $('span').click(function() {  
  $(this).closest('.parent').toggleClass('active').siblings().removeClass('active');        
});
    .active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}

.active .dropdown {
  color: blue;
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

    但是 parent 可能根本不是邻居，它们分散在页面的不同地方，

    $('span').click(function(e) {  
  e.stopPropagation();  
  let myParent = $(this).closest('.parent');
  
  $('.parent').not(myParent).removeClass('active'); 
  myParent.toggleClass('active');        
});
    .active.dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}

.active .dropdown {
  color: blue;
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

<div>
  <span>
    <div class='parent'>
      <span>Третий</span>
      <div class="dropdown">Content</div>
    </div>
  </span>
</div>    

<ul>
  <li>test
    <div>
      <div class='parent active'>
        <span>Четвертый</span>
        <div class="dropdown">Content</div>
      </div>
    </div>
  </li>
  <li>test2</li>  
</ul>

    • 3

  2. 你可以没有toggleClass

    $('span').click(function() {

if( $(this).parent().hasClass('active')){
 $(this).next('.dropdown').hide().parent().removeClass('active');
return false;
}

        $('.dropdown').hide().parent().removeClass('active');
        $(this).next('.dropdown').show().parent().addClass('active');
});
    .active .dropdown {
  color: red;
  display: block;
}

.dropdown {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='parent'>
  <span>первый</span>
  <div class="dropdown">Content</div>
</div>

<div class='parent'>
  <span>Второй</span>
  <div class="dropdown">Content</div>
</div>

    • 1

相关问题