javascript - 滑动/隐藏 Divs 问题

Question

所以我试图为我网站的项目部分制作各种手风琴，我遇到了一个非常奇怪的问题（或者我可能真的很累）。第一次单击以展开选择工作正常，但是当再次单击标题以返回原始状态时，先前展开的标题的内容将被隐藏。此外，在第一个包含边框消失后的任何时间再次单击相同的标题以展开。

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

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 就没有高度。

score 1 · Accepted Answer

试试这个。

现场演示在这里

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

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

替代解决方案

现场演示在这里

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

score 0 · Accepted Answer

这是一个愚蠢的错误。我只是忘记在隐藏/显示时只选择div孩子，所以a孩子们保持隐藏状态或其他东西。换句话说，我改变了这个：

$(this).children()

对此：

$(this).children('div')

感谢 pfried 的指示！

score 0 · Accepted Answer

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
    <script>
    $(document).ready(function() {
    $('div.header div.slide').css('display','none');
        $('div.header').toggle(
            function(){$('div.header').hide('fast'); $(this).show('slow'); $('div.slide').css('display','block');},
            function(){$('div.slide').css('display','none'); $('div.header').show('fast');});
    });
    $(document).ready(function(){
        var text = $('div.cont');
        $('div.slide').toggle(
            function(){$('div.slide').hide('fast'); $(this).show('slow'); $('div.cont').css('display','block');},
            function(){ $('div.cont').css('display','none'); $('div.slide').show('fast');});
    })
    </script>
    <style>
        .off{display: none;}
        .on{ display: block;}
        div.cont{ display: none;}
        .slide{ display:none;}
    </style>
</head>
<body>
   <div id="projects">
        <div class="header">Websites
            <div class='slide'><a href="#">Saia LTL, Inc.</a>
              <div class='cont'>a;dasndiasfhnip</div>
            </div>
            <div class='slide'><a href="#">Insurance House</a><div class='cont'>dasndiasfhnip</div></div>
            <div class='slide'><a href="#">Scandinavian Collectors Club</a><div class='cont'>dasndiasfhnip</div></div>
            <div class='slide'><a href="#">Casey Sills Photography</a><div class='cont'>dasndiasfhnip</div></div></div>
        <div class="header">Personal Projects
            <div class='slide'><a href="#">cTV</a><div class='cont'>dasndiasfhnip</div></div>
            <div class='slide'><a href="#">PoE DPS calculator</a><div class='cont'>dasndiasfhnip</div></div>
            <div class='slide'><a href="#">tSlide</a><div class='cont'>dasndiasfhnip</div></div></div>
    </div>
</body>

我更喜欢这个，试一试

score -1 · Accepted Answer

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>$(document).ready(function() {
    var sign = 1;
        $('#projects > div.header').on('click', function() {
            if (sign == 1) {
                $(this).css('border-bottom', 'none');
                $(this).children().slideDown(400);
                $(this).siblings().slideUp(400);
            }
            else {
                $(this).children().slideUp(400);
                $(this).siblings().slideDown(400);
                $(this).css({
                    'height': '29px',
                    'z-index': '2'
                });
            }
            sign = sign*-1;
        });
        $('div.slide').click(function(){
            $('div.cont').slideToggle('slow');
        });
    });
    </script>
    <style>
        div.cont{ display: none;}
    </style>
</head>
<body>
   <div id="projects">
        <div class="header">Websites</div>
            <div class='slide'><a href="#">Saia LTL, Inc.</a>
              <div class='cont'></div>
            </div>
            <div class='slide'><a href="#">Insurance House</a><div class='cont'></div></div>
            <div class='slide'><a href="#">Scandinavian Collectors Club</a><div class='cont'></div></div>
            <div class='slide'><a href="#">Casey Sills Photography</a><div class='cont'></div></div>
        <div class="header">Personal Projects</div>
            <div class='slide'><a href="#">cTV</a><div class='cont'></div></div>
            <div class='slide'><a href="#">PoE DPS calculator</a><div class='cont'></div></div>
            <div class='slide'><a href="#">tSlide</a><div class='cont'></div></div>
    </div>
</body>

我只是尝试为兄弟姐妹添加一个类来具体表示他们----你是在看我很高兴还是有什么特别的事情请评论我-----谢谢

javascript - 滑动/隐藏 Divs 问题

4 回答 4

Related

Reference