Question

我知道有很多这样的主题，但我找不到正确答案。

加载文档后，我想关闭所有块（slideUp）。

当用户点击一个块时，文本向下滑动兄弟姐妹打开其他块（如果打开则关闭其他块）。

我有这个，但它只用了两个块：

<div class="col-xs-12 wrap-blocks-concours">
            <div class="col-xs-12 blocks-concours">

                <div class="col-xs-8">
                    <img src="#" alt="Nicolas et Mathieu">
                </div>

                <div class="bandeau-nom-concours">
                    <h3 class="uppercase">Nicolas et Mathieu</h3>
                </div>

                <div class="col-xs-4 text-block selected">
                    <h5 class="uppercase">Content</h5>
                </div>
            </div>

            <div class="col-xs-12 text-slide">
                <h3>Content</h3>
            </div>
        </div>

我的Jquery：

(function($) {
        $(document).ready(function() {
            $('.blocks-concours').click(function() {
                var currentContent = $(this).siblings('.text-slide');
                $('.text-slide').not(currentContent).slideUp();
                currentContent.slideToggle().sibling($('.text-slide'));
            });
        });
    })(jQuery);

此外，我的display: none

上有一个text-slide

那么我怎样才能更简单地做到这一点？

Answer 1

你太近了！您曾使用sibling代替siblings。我刚刚删除了那部分，因为它没有做任何事情。

＆＃13;

$(document).ready(function() {
    $('.blocks-concours').click(function() {
        var currentContent = $(this).siblings('.text-slide');
        $('.text-slide').not(currentContent).slideUp();
        currentContent.slideToggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 wrap-blocks-concours">
            <div class="col-xs-12 blocks-concours">

                <div class="col-xs-8">
                    <img src="#" alt="Nicolas et Mathieu">
                </div>

                <div class="bandeau-nom-concours">
                    <h3 class="uppercase">Nicolas et Mathieu</h3>
                </div>

                <div class="col-xs-4 text-block selected">
                    <h5 class="uppercase">Content</h5>
                </div>
            </div>

            <div class="col-xs-12 text-slide">
                <h3>Content</h3>
            </div>
        </div>

＆＃13;

Slidedown元素和slideUp其他

1 个答案: