Question

您好我正在使用jQuery隐藏我页面上的一些元素，这很好用，我可以在元素之间滑动切换。但是我想要显示第一个孩子，但这不能正常工作。我之前使用过相同的代码所以我不明白为什么它不起作用。

我基本上希望第一个togglesettings div显示在页面加载上，其余部分隐藏。

我的代码位于下方或查看我的jsFiddle：

的index.html

<div class="container maincontent add-top add-bottom">

<div class="container add-top">
    <h3>Welcome John Doe</h3>
    <p>Please select which service you would like to manage below</p>
    <hr />
</div>

<div class="blockwrapper">
<div class="container editblocks">
    <div class="editblock block_item_1">
    <h3 class="showpageblock">Page Settings</h3>
        <div class="togglesettings">
            <div class="form-group two-thirds column">
                <label class="form-label">Filename: </label> <input class="edit-page-input" type="text"/>
            </div>

            <div class="form-group two-thirds column">
                <label class="form-label">Navigation button (words): </label> <input class="edit-page-input" type="text"/>
            </div>
        </div><!-- End Toggle Settings -->
    </div><!-- End Block -->
</div> <!-- End Edit Block -->

<div class="container editblocks">
    <div class="editblock block_item_2">
        <h3 class="showpageblock">SEO</h3>
            <div class="togglesettings">
                <p>Loreum Ipsum</p>
            </div><!-- End Toggle Settings -->
        </div><!-- End Block -->
</div> <!-- End Block -->

<div class="container editblocks">
    <div class="editblock block_item_2">
        <h3 class="showpageblock">SEO</h3>
            <div class="togglesettings">
                <p>Loreum Ipsum</p>
            </div><!-- End Toggle Settings -->
        </div><!-- End Block -->
</div> <!-- End Block -->
</div>

</div> <!-- End Main Content Div -->

JS / js.js

$('.togglesettings').hide();
$('.togglesettings:first-child').show;
$('.showpageblock').on('click', function () {
    $(this).closest('.editblocks').siblings().find('.togglesettings').slideUp();
            $(this).next('.togglesettings').slideToggle();
            $(this).parent().siblings().children().next().slideUp();
    return false;
        });

Answer 1

试试这个

 $('.togglesettings').hide();
 $('.togglesettings:first').show();
 $('.showpageblock').on('click', function () {
    $(this).closest('.editblocks').siblings().find('.togglesettings').slideUp();
            $(this).next('.togglesettings').slideToggle();
            $(this).parent().siblings().children().next().slideUp();
    return false;
        });

Answer 2

您缺少括号()

$('.togglesettings:first-child').show; // use show();

Answer 3

以下代码可以为您提供帮助。

$('.togglesettings').hide();
$('.blockwrapper .container:first-child').find('.togglesettings').show()
$('.showpageblock').on('click', function () {
    $('.togglesettings').hide();
      $(this).next().slideToggle();
});

更新小提琴链接在这里：http://jsfiddle.net/C7nEP/4/

Answer 4

我不知道，为什么first-child选择器不起作用，但您可以使用.first()作为解决方法：

JSFiddle

$('.togglesettings').hide();
$('.togglesettings').first().show();
$('.showpageblock').on('click', function () {
    $(this).closest('.editblocks').siblings().find('.togglesettings').slideUp();
    $(this).next('.togglesettings').slideToggle();
    $(this).parent().siblings().children().next().slideUp();
    return false;
});

Answer 5

此刻，您期待“：first-child”寻找“.togglesettings”的第一个实例。然而，它真正做的是寻找它的父的第一个孩子 - 在你的情况下是“.showpageblock”DIV。

正如其他人提供的解决方案所示，请改用“.first（）”。它不是CSS选择器，而是一个jQuery方法，它通过DOM搜索整个树中的第一个。

jQuery API - :first-child

jQuery API - .first()

jQuery显示第一个孩子工作不正常

5 个答案: