代码之家  ›  专栏  ›  技术社区  ›  Husna

单击“活动”选项卡“添加/删除类”

html jquery javascript
  •  0
  • Husna  · 技术社区  · 6 年前

    我正在处理活动中的手风琴选项卡,我想添加该类 .elementor-active 在“.elementor选项卡标题”中,但当我尝试添加活动类时,它被添加到所有“.elementor选项卡标题”中,我也使用了 .siblings() 和 children() 

    (function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    allPanels.slideUp();
    $('.elementor-accordion-item > .elementor-tab-title').addClass('elementor-active').closest().find('.elementor-active').removeClass('elementor-active');
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);
    .elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>
    0 回复  |  直到 6 年前
        1
  •  -1
  •   Community Mohan Dere    6 年前

    这里有一些变化

    只需在添加类之前删除 $('.elementor-tab-title').removeClass('elementor-active');

    $(this).parent().addClass('elementor-active');

    编辑:

    如果需要切换,则可以使用 $(this).parent().hasClass('elementor-active') 如果元素有类或没有类,请按照下面的步骤执行操作。 

    (function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    //allPanels.slideUp();
    if($(this).parent().hasClass('elementor-active')){
      $(this).parent().removeClass('elementor-active').next().slideUp();
    } else {
     $(this).parent().addClass('elementor-active').next().slideDown();
    }
    return false;
  });

})(jQuery);
    .elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>
        2
  •  1
  •   Zulqarnain Jalil    6 年前

    $(this) 而不是使用类获取元素。你需要知道怎么做 this 关键字在JavaScript中工作。 

        (function ($) {

        var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();
        $('.elementor-accordion-item > .elementor-tab-title > a').click(function () {
            if (!$(this).parent().hasClass('elementor-active')) {
                allPanels.slideUp();
                allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
                $(this).parent().addClass('elementor-active')
                $(this).parent().next().slideDown();
            }
            else {
                allPanels.slideUp();
                allPanels.prevObject.find('.elementor-active').removeClass('elementor-active');
            }

            return false;
        });

    })(jQuery);
    .elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>
        3
  •  -1
  •   MomasVII    6 年前 

    (function($) {

  var allPanels = $('.elementor-accordion-item > .elementor-tab-content').hide();

  $('.elementor-accordion-item > .elementor-tab-title > a').click(function() {
    allPanels.slideUp();
    $('.elementor-accordion-item > .elementor-tab-title').removeClass('elementor-active');
    $(this).parent().addClass('elementor-active');
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);
    .elementor-accordion {
  margin: 50px;
}

.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}

.elementor-accordion .elementor-tab-title:last-of-type,
.elementor-accordion .elementor-tab-content:last-of-type {
  border-bottom: 1px solid black;
}

.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-content a {
  display: block;
  color: black;
  font-weight: bold;
}

.elementor-accordion .elementor-tab-content {
  border-top: 0;
  font-size: 12px;
}

.elementor-accordion .elementor-tab-content:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

a {
  text-decoration: none;
}

body {
  font: 16px Sans-Serif;
}

.elementor-tab-title.elementor-active {
  background: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 1</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 2</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

  <div class="elementor-accordion-item">
    <div class="elementor-tab-title"><a href="">Panel 3</a></div>
    <div class="elementor-tab-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
  </div>

</div>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Dr.0000FF  ·  jQuery按钮点击不显示/隐藏内容
    1 年前
    user28928120  ·  如何在jquery中选择所有类?
    1 年前
    LauraNMS  ·  如何使用Waypoints js实现粘性元素和偏移量
    1 年前
    Eliable  ·  使点击计数器和进度条协同工作
    1 年前
    mlri  ·  从不同的onclick事件执行相同的javascript函数
    1 年前
    Cymro  ·  如何将jquery$(this)与$(document).keyup一起使用
    1 年前
    Jack Maessen  ·  在处理程序上使用时如何获取输入类型
    1 年前
    BlueDogRanch  ·  使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)
    1 年前
    Jameel  ·  Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号