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

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

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

    我正在处理活动中的手风琴选项卡,我想添加该类 .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 回复  |  直到 5 年前
        1
  •  -1
  •   Community CDub    4 年前

    这里有一些变化

    只需在添加类之前删除 $('.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    5 年前

    $(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    5 年前 

    (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>
    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    Jason Owens  ·  我的html/javascript播放按钮无法播放嵌入的youtube视频
    1 年前
    SlickRed  ·  我无法使用JS关注HTML元素
    1 年前
    Mayron Guedes  ·  如果登录名不在本地存储中,如何重定向页面?
    1 年前
    assembler  ·  Nextjs没有处理发布请求
    1 年前
    PavelB  ·  如何使用Seleniumwebdriver和mocha只运行一个测试文件?
    1 年前
    BADRUM  ·  执行两个获取功能后,如何导航回页面?
    1 年前
    Toniq  ·  javascript为php保存多维数组
    1 年前
    Natalie Smyth  ·  隐藏类只在我试图切换的两个部分中的一个部分上工作
    1 年前
    SkyWalker  ·  在JavaScript中,合并日期-时间序列的有效算法是什么?
    1 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号