Question

我有以下div

       <div id="acc">
           <a href="#">Link 1</a>
           <div>
                Some Content
           </div>
           <a href="#">Link 2</a>
           <div>
               Some Content
           </div>
       </div>

所有div都崩溃了。如何选择'acc'的第一个div子项并在其上滑动

我已经像这样缓存了选择器：

var $ acc = $（acc）;

Answer 1

查看first selector（或nth-child）并将其与children method结合使用：

$(acc).children('div:first').slideDown();

如果您只想要一个选择器，请查看child selector：

$('#acc > div:first').slideDown();

如何更改它以向上滑动除第一个之外的所有div。

您可能会发现更容易标记所谓的“有效”div，而不是尝试找到 all-except ：

$(acc).children('div:first').addClass('active').slideDown();

找到之前标记的div：

$(acc).find('.active').removeClass('active').slideUp();

但是，如果您的目标是创建手风琴效果，那么使用完整的解决方案（例如jQuery UI's Accordion或任何numerous plugins）可能会让您自己省去很多麻烦。

Answer 2

喜欢这个

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                $("#acc").children().first().hide().slideDown('slow',function(){
                    // animation complete...
                });
            });

        </script>
    </head>
    <body>

        <div id="acc">
           <a href="#">Link 1</a>
           <div>
                Some Content
           </div>
           <a href="#">Link 2</a>
           <div>
               Some Content
           </div>
       </div>

    </body>
</html>

选择子元素

2 个答案: