javascript - 滑动/隐藏 Div 问题

Question

所以我试图为我网站的项目部分制作一个 Accordion ，但我遇到了一个非常奇怪的问题(或者也许我只是真的很累)。第一次单击以展开选择内容效果很好，但是当再次单击标题以返回到原始状态时，先前展开的标题的内容将被隐藏。此外，在第一次单击同一标题后随时展开，包含边框就会消失。

要查看我的问题，只需访问我的网站:

http://cole.quinnchrzan.com/cc2

并点击项目部分亲自查看。

如果您只想看一下这里的代码，那就是:

$(document).ready(function() {
var sign = 1;
    $('#projects > div:not(.header)').on('click', function() {
        if (sign == 1) {
            $(this).css('border-bottom', 'none');
            $(this).children().slideDown(400);
            $(this).siblings().slideUp(400);
        }
        else {
            $(this).css('border-bottom', '1px solid black');
            $(this).children().slideUp(400);
            $(this).siblings().slideDown(400);
            $(this).css({
                'height': '29px',
                'z-index': '2'
            });
        }
        sign = sign*-1;
    });
});

和 HTML:

<section id="projects">
    <div class="header">Websites</div>
    <div><a href="#">Saia LTL, Inc.</a>
        <div></div>
    </div>
    <div><a href="#">Insurance House</a></div>
    <div><a href="#">Scandinavian Collectors Club</a></div>
    <div><a href="#">Casey Sills Photography</a></div>
    <div class="header">Personal Projects</div>
    <div><a href="#">cTV</a></div>
    <div><a href="#">PoE DPS calculator</a></div>
    <div><a href="#">tSlide</a></div>
</section>

我添加了一些额外的 css 'height': '29px' 'z-index': '2' 来尝试使受影响的标题再次显示，但它只是创建一个空的 div。如果没有这个 css，div 就没有高度。

Answer 1

试试这个。

现场演示here

HTML

<section id="projects">PROJECTS
    <div class="header">Websites</div>
    <div><a href="#">Saia LTL, Inc.</a></div>
    <div><a href="#">Insurance House</a></div>
    <div><a href="#">Scandinavian Collectors Club</a></div>
    <div><a href="#">Casey Sills Photography</a></div>
    <div class="header">Personal Projects</div>
    <div><a href="#">cTV</a></div>
    <div><a href="#">PoE DPS calculator</a></div>
    <div><a href="#">tSlide</a></div>
</section> 

JavaScript

var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
    if (sign == 1) {
        $(this).css('border-bottom', 'none');
        $(this).children().slideDown(400);
        $(this).siblings().slideUp(400);
    }
    else {
        $(this).css('border-bottom', '1px solid black');
        $(this).siblings().slideDown(400);
        $(!$(this).children(":first")).slideUp(400);
    }
    sign = sign*-1;
});

-------------------------------------------------------- -------------------------------------------------- --------------------------------------------------

替代解决方案

现场演示here

HTML

<section id="projects">PROJECTS
    <div class="header">Websites</div>
    <div><a href="#" class="ShowThis">Saia LTL, Inc.</a></div>
    <div><a href="#" class="ShowThis">Insurance House</a></div>
    <div><a href="#" class="ShowThis">Scandinavian Collectors Club</a></div>
    <div><a href="#" class="ShowThis">Casey Sills Photography</a></div>
    <div class="header">Personal Projects</div>
    <div><a href="#" class="ShowThis">cTV</a></div>
    <div><a href="#" class="ShowThis">PoE DPS calculator</a></div>
    <div><a href="#" class="ShowThis">tSlide</a></div>
</section>        

JavaScript

var sign = 1;
$('#projects > div:not(.header) > .ShowThis').on('click', function() {
    if (sign == 1) {
        $(this).css('border-bottom', 'none');
        $(this).children().slideDown(400);
        $(this).parent().siblings().slideUp(400);
    }
    else {
        $(this).parent().css('border-bottom', '1px solid black');
        $(this).parent().siblings().slideDown(400);        
        $(this).children().slideUp(400);
    }
    sign = sign*-1;
});