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

嗨我正在使用jQuery来隐藏我的网页上的一些元素，这工作正常，我可以滑动切换元素之间。不过，我想要显示第一个孩子，但是这不能正常工作。我以前使用过相同的代码，所以我不明白为什么它不起作用。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; 
     });

来源

2014-02-06 001221

我不知道，为什么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; 
});

来源

2014-02-06 10:22:15

你缺少括号()

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

来源

2014-02-06 10:12:42

试试这个

$('.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; 
     });

来源

2014-02-06 10:13:03

下面的代码可以帮助你。

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

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

来源

2014-02-06 10:19:55

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

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

jQuery API - :first-child

jQuery API - .first()

来源

2014-02-06 11:17:12 lnoogn

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

回答

相关问题