时间戳

首页 > 解决方案 > jQuery 上的选项卡内容

jquery - jQuery 上的选项卡内容

问题描述

我是初学者前端开发。我来自乌克兰，我的英语是如此……但我一次又一次地学习英语。
那我继续...

当我单击一个新块时，如何使前一个块关闭？ 在此处输入图像描述

我有这个代码

<pre>
<div class="gallery__column">
 <div class="gallery__item">
    <div class="overlay gallery__overlay"></div>                    
        <div class="gallery__image">
            <a class="content-open" href="##">
            <img class="gallery__img" src="img/example/01.jpg" alt="">
            <span data-tab="tab-4" class="gallery__arrow arrow"></span>
            </a>
        </div>
    <div class="gallery__content" id="tab-4">
    <h4 class="gallery__title">Электрические шторы</h4>
    <div class="gallery__brand">SOMFY 1</div>
    <div class="gallery__text"></div>
    </div>
    </div>
</div>
</pre>

<div class="gallery__item">
<div class="overlay gallery__overlay"></div>
<div class="gallery__image">
<img class="gallery__img" src="img/example/02.jpg" alt="">
    <a class="content-link" href="##"></a>
    <span data-tab="tab-1" class="gallery__arrow arrow"></span>
    </div>
    <div class="gallery__content" id="tab-1">
        <h4 class="gallery__title">Электрические шторы</h4>
        <div class="gallery__brand">SOMFY 1</div>
        <div class="gallery__text">
</div>
</div>

$('.arrow').on('click', function(){
        $('.arrow').removeClass('active');
        $('.arrow').parents().siblings('.gallery__content');
        $(this).addClass('active');
        $(this).parents().siblings('.gallery__content').slideToggle();
    });

标签： jquerylisttabs

解决方案

您几乎拥有它，但我建议您在您的情况下使用.closest()组合与.find()，如下例所示。

$('.arrow').on('click', function() {
  $('.arrow').removeClass('active');
  $('.arrow').not(this).closest('.gallery__item').find('.gallery__content');
  $(this).addClass('active');
  $(this).closest('.gallery__item').find('.gallery__content').slideToggle();
});

演示

$('.arrow').on('click', function() {
  $('.arrow').removeClass('active');
  $('.arrow').not(this).closest('.gallery__item').find('.gallery__content').hide();
  $(this).addClass('active');
  $(this).closest('.gallery__item').find('.gallery__content').slideToggle();
});
.gallery__content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre>
<div class="gallery__column">
 <div class="gallery__item">
    <div class="overlay gallery__overlay"></div>                    
        <div class="gallery__image">
            <a class="content-open" href="##">
            <img class="gallery__img" src="img/example/04.jpg" alt="">
            <span data-tab="tab-4" class="gallery__arrow arrow">arrow</span>
            </a>
        </div>
    <div class="gallery__content" id="tab-4">
    <h4 class="gallery__title">Электрические шторы</h4>
    <div class="gallery__brand">SOMFY 1</div>
    <div class="gallery__text"></div>
    </div>
    </div>
</div>
</pre>



<pre>
    <div class="gallery__column">
     <div class="gallery__item">
        <div class="overlay gallery__overlay"></div>                    
            <div class="gallery__image">
                <a class="content-open" href="##">
                <img class="gallery__img" src="img/example/04.jpg" alt="">
                <span data-tab="tab-4" class="gallery__arrow arrow">arrow</span>
                </a>
            </div>
        <div class="gallery__content" id="tab-4">
        <h4 class="gallery__title">Электрические шторы</h4>
        <div class="gallery__brand">SOMFY 1</div>
        <div class="gallery__text"></div>
        </div>
        </div>
    </div>
    </pre>

推荐阅读