主页 / 问题 / 1308041
Accepted
Meth0d
Asked:2022-07-23 16:52:15 +0000 UTC2022-07-23 16:52:15 +0000 UTC

jquery在事件中添加类

  • 772

主要有3条线路。通过点击主线，之前隐藏的列表退出，--active类叠加在上面，opacity类应用到其余的主线。问题是，如果您打开另一条主线，则 opacity 类开始在活动线上重叠并在第三行崩溃（在示例中您可以看到发生了什么）。建议一种算法来避免这种情况。应该可以一次打开多个选项卡，当您关闭所有选项卡时，一切都应该恢复到默认状态。

https://jsfiddle.net/6dgxv74n/

不幸的是，我不知道如何添加 jquery 代码，所以工作示例在链接中

.main {
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 12px;
}

.main--active {
  background-color: #ccc;
}
.opacity {
  opacity: 0.4;
}
<div class="main">main row</div>
  <ul class="hidden">
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
  </ul>
<div class="main">main row</div>
  <ul class="hidden">
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
  </ul>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>

javascript

3 个回答

  1. Best Answer

    解决方案

    $(document).ready(function(){
  $('.main').click(function () {
    $(this).next(".hidden").slideToggle("slow");
    $(this).toggleClass('main--active');        
    $('.main').css('opacity',0.4);
    $('.main.main--active').css('opacity',1);
    if ($('.main.main--active').length == 0) {
      $('.main').css('opacity',1);
    }
  });
})
    .main {
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
}
.main--active {
  background-color: #ccc;
}
.hidden {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>

    • 1 

  2. $(document).ready(function(){
let opened = 0;
  $('.main').click(function () {
    // удаляем клас у всех div.main
    $('.main').removeClass('main--active');
    // если ul текущего div.main не имеет класса shown
    if ( !$(this).next(".hidden").hasClass("shown") ) {
      // добавляем текущему div.main клас
      $(this).addClass('main--active');
    }
    // "открываем" текущий ul эл-т
    $(this).next(".hidden").slideToggle("slow");
    // добавляем/удаляем класс для отслеживания
    // открытых меню, напр. класс shown
    $(this).next(".hidden").toggleClass("shown");
    // проверяем кол-во видимых ul
    if ( $('.shown').length ) {
      // добавляем класс всем div.main 
      $('.main').addClass('opacity');
    } else {
      // удаляем все .opacity
      $('.main').removeClass('opacity');
    }
    // удаляем класс у текущего div.main
    $(this).removeClass('opacity');
  });
})
    .main {
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
}
.main:not(.main--active) + ul {
  opacity: 0.4;
}
.main--active {
  background-color: #ccc;
}
.opacity {
  opacity: 0.4;
}
.hidden {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>
<div class="main">main row</div>
<ul class="hidden">
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
  <li>subrow</li>
</ul>

    • 0

  3. 如果很快，以一种简单的方式，我理解正确：https ://jsfiddle.net/y21evzbt/2/

    总是将子元素包装在单独的块中，那么问题就会更少

    $(document).ready(function(){
    $('.menu').each(function(){
    var item = $(this);
    item.find('.main').off('click').on('click', function(){
        $('.menu').removeClass('main--active').addClass('opacity');
      $('.menu').find('.hidden').removeClass('show');
        item.toggleClass('main--active').removeClass('opacity');
        item.find('.hidden').toggleClass('show');
    });
  });
})
    .main {
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 12px 12px 0 0;
}

.main--active {
  background-color: #ccc;
}
.opacity {
  opacity: 0.4;
}
.hidden{
  display:none;
}
.show{
  display:block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <div class="main">main row</div>
  <ul class="hidden">
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
  </ul>
</div>
<div class="menu">
  <div class="main">main row</div>
  <ul class="hidden">
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
  </ul>
</div>
<div class="menu">
  <div class="main">main row</div>
  <ul class="hidden">
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
    <li>subrow</li>
  </ul>
</div>

    • -1

相关问题