Question

你有没见过别人的代码，只是笑了？准备好用我的jQuery这样做，因为它对你没有任何意义，但我正在尝试：）

无论如何，我需要的是简单的，我从其他问题中获得了一些灵感，例如Slide Panel up and down，但它们并没有完全符合我的需要。至少可以解决问题。

我的标题下方有一个面板（BOOTSTRAP）。该面板需要存在，但用户必须选择稍微关闭它，不是全程。只需要仍然可以使用fa-chevron图标点击它并将其向下滑动以及一些信息（我将在下面提供图片）。

简而言之，要求是：

开始开放，fa-chevron-up
点击图标，面板向上滑动（有点慢），隐藏照片和第二行信息，并将图标切换为fa-chevron-down。
点击fa-chevron（折叠视图）后，所有内容都会返回初始完整视图。

这是HTML

<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
</div>  
<div class="row">
    <div class="col-xs-12">
        <div class="banner clearfix">
            <div class="collapser">
                <a href="#"><i class="fa fa-chevron-up fa-fw collapse-icon"></i></a>
            </div>
            <div class="banner-info clearfix">
                <div class="col-sm-12 col-md-2">
                    <div class="circle-container">
                        <img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
                    </div>
                </div>
                <div class="col-sm-12 col-md-10">
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label class="control-label">Full Name</label>
                            <span>Floyd "Money" Mayweather</span>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Some Label</label>
                            <span>Something Here</span>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label class="control-label">Offender ID#</label>
                            <span>123569863</span>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Longer Label Example</label>
                            <span>Something Here with an ellipsis</span>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label class="control-label">Institution</label>
                            <span>Graterford</span>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Some Link</label>
                            <a href="#"><span>Something Here</span></a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label class="control-label">Institution</label>
                            <span>Graterford</span>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Some Link</label>
                            <span href="#"><p>Something Here</p></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.navbar {
    border: none;
    border-bottom: 2px solid #30373e;
    font-size: 14px;
    -webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
    box-shadow: 0 1px rgba(0,0,0,0.025);
    z-index: 1040;
    margin-bottom: 0;
    height: 55px;
}

.banner {
    border: none;
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
    box-shadow: 0 2px 0 rgba(0,0,0,0.07);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 20px;
    position: relative;
    background: #101113;
    padding: 20px;
    display: block;
    top: 55px;
}

.banner .collapser {
    position: absolute;
    bottom: 10px;
    color: #bbb;
}

.banner .circle-container {
    position: relative;
    left: 35px;
    text-align: center;
    width: 110px;
    height: 110px;
    display: flex;
    overflow: hidden;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    border: 3px solid #bbb;
}

.banner .banner-info label {
    color: rgba(248,151,29,0.77);
}

.banner .banner-info span {
    display: block;
    color: #bbb;
    white-space: nowrap;
    width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
}

和非常模糊，可能没用的JS

$('.collapser').click(function () {
    $collapser = $(this);
    $banner = $collapser.parent().find('.banner');

    $banner.slideToggle(500, function () {
        $collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
    });
});

以下是视觉参考的两种观点

初步观点

折叠视图

这是CODEPEN

Answer 1

没有.banner元素显示为$collapser.parent()的孩子？

尝试在.banner

处将.banner-info更改为$banner = $collapser.parent().find(".banner-info");

codepen http://codepen.io/anon/pen/WrXYGx

有没有办法将它向上滑动？或者那将是一个整体不同的交易？因为如果我可以隐藏照片和第二行搞得太久了，但我仍然需要保留第一排可见。

将选择器$banner = $collapser.parent().find('.banner-info .circle-container, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)')用作$banner集合

$('.collapser').click(function() {
    $collapser = $(this);
    $banner = $collapser.parent()
             .find('.banner-info .circle-container\
                  , .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)');

    $banner.slideToggle(500, function() {
        $collapser
        .find('.collapse-icon')
        .toggleClass('fa-chevron-up fa-chevron-down');
    });
});

codepen http://codepen.io/anon/pen/WrXYGx

使用jQuery在滑动面板上的动态视图

1 个答案: