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顯示第一個孩子不能正常工作

回答

相關問題