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

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

Answer 2

这是一个愚蠢的错误。我只是忘了在隐藏/显示时只选择div个孩子，这样a个孩子仍然隐藏或者什么。换句话说，我改变了这个：

$(this).children()

到此：

$(this).children('div')

感谢pfried的指示！

Answer 3

<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>

我希望这个只是尝试一下

Answer 4

<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>

我只是尝试在兄弟姐妹中添加一个类来特别表示它们----你是否正在寻找我很高兴或者其他任何特别的请评论我----- thankyou

滑动/隐藏分区问题

4 个答案: