向上滑动向下滑动不起作用

Question

当用户点击image-exp时，我想向下滑动description-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 的“折叠”，它似乎非常适合您的场景。

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

Answer 2

您正在使用$.siblings() 定义currentContent，这将获得带有.description-exp 的所有 元素。您只需要在您单击的 .image-exp 之后出现的那个 - 您可以使用 $.next() 来定位那个。

    $(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();
    });
    });

.image-exp{
  background: red;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-exp">
    <h3 class="logo-kaiman">KAIMAN</h3>
    <h6 class="logo-kaiman">Intégrateur</h6>
</div>
                
 <div class="description-exp">
  <p>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>

<div class="image-exp">
    <h3 class="logo-kaiman">KAIMAN</h3>
    <h6 class="logo-kaiman">Intégrateur</h6>
</div>
                
 <div class="description-exp">
  <p>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>

<div class="image-exp">
    <h3 class="logo-kaiman">KAIMAN</h3>
    <h6 class="logo-kaiman">Intégrateur</h6>
</div>
                
 <div class="description-exp">
  <p>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>