Question

当用户点击description-exp，向上滑动其他人image-exp时，我想向下滑description-exp。

我正在使用Bootstrap模板：this one

我也做了一个有效的JSFiddle just here，但我不知道问题出在哪里..

有个主意吗？

这是我的代码：

<div class="col-md-3 wrap-image-exp" id="kaiman">
    <div class="image-exp">
        <img src="./img/kaiman.png" class="img-responsive logo-
        experiences" alt="Kaiman">
        <h3 class="logo-kaiman">Title</h3>
        <h6 class="logo-kaiman">small text</h6>
    </div>
</div>

<div class="col-xs-12 description-exp">
    <h4>MOTS-CLEFS : Bootstrap3, HTML5, CSS3, WordPress</h4>
        <p><u>Kaiman</u> est la fusion d'une agence de conseil en 
            communication et d'une ESN. Elle rassemble plusieurs pôles 
            (K-Up, K-Service et K-Communication) et offre ainsi un 
            éventail de solutions à ses clients.
        </p>
</div>

和CSS：

.description-exp{
    background: #F2F2F2;
    padding: 20px;
    border: solid 3px #223645;
    border-radius: 3px;
    display: none;
}

Answer 1

这并不能解决您的问题，但考虑使用Bootstrap＆＃34;崩溃＆＃34;，它似乎很适合您的情况。

https://v4-alpha.getbootstrap.com/components/collapse/#accordion-example http://getbootstrap.com/javascript/#collapse-example-accordion

Answer 2

您正在使用list_ = [0,4,5,6,18]来定义$.siblings()，并且所有元素都会currentContent。您只需要在.description-exp点击之后找到的那个 - 您可以使用.image-exp来定位该广告。

＆＃13;

$.next()

＆＃13;

    $(document).ready(function() {
        $('.image-exp').click(function () {
        //$(this).addClass('active-description-exp');

        var currentContent = $(this).next('.description-exp');
        $('.description-exp').not(currentContent).slideUp();
        currentContent.slideToggle();
    });
    });

＆＃13;

.image-exp{
  background: red;
}

.description-exp{
    background: #F2F2F2;
    padding: 20px;
    border: solid 3px #223645;
    border-radius: 3px;
    display: none;
}

＆＃13;

slideUp slideDown无效

2 个答案: