JQuery容器操作

首先我不是100％確定如何標題這個頁面，所以請編輯，如果你可以。JQuery容器操作

所以我學習如此jQuery，我想要一個系統，有一個頁面上的文章數量，當第一次加載頁面時，我想顯示第一篇文章，所有其他文章要減少到他們的標題文字或設定高度。

現在我有一個系統，將打開和關閉的容器，它看起來就像是：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".content").hide(); 

     //toggle the component with class msg_body 
     jQuery(".heading").click(function() { 
      jQuery(this).next(".content").slideToggle(500); 
     }); 
    }); 
</script>

我的標記是這樣的：

<div class="page_content"> 
    <h1 align="center">Updates</h1> 
    <article class="update_article"> 
     <h2 class="heading">13/12/2012 - Article Heading</h2> 
     <div class="content"> 
      Article Body 
     </div> 
    </article> 

    <article class="update_article"> 
     <h2 class="heading">13/12/2012 - Article Heading</h2> 
     <div class="content"> 
      Article Body 
     </div> 
    </article> 
</div>

當這個運行時，所有的文章會簡化爲他們的標題，一旦他們被點擊jQuery將打開正文。

所以我想知道如何在頁面加載時首先打開第一篇文章，但是我也希望系統在單擊並打開另一篇文章時關閉打開的文章。

感謝您的幫助和任何教程或閱讀此主題的信息是非常受歡迎的。

來源

2012-12-13 ragebunny

jQuery(".content").hide(); 
//toggle the componenet with class msg_body 
jQuery(".heading").click(function() { 
    jQuery(".content").slideUp(); 
    jQuery(this).next(".content").slideToggle(500); 
}); 

jQuery(".heading:first").click();

Demo.

，可以稍微提高它不進/出當前顯示的文章中滑動，例如：

jQuery(".content").hide(); 
//toggle the componenet with class msg_body 
jQuery(".heading").click(function() { 
    var $nextContent = jQuery(this).next(".content"); 
    jQuery(".content").not($nextContent).slideUp(); 
    jQuery(this).next(".content").slideToggle(500); 
}); 

jQuery(".heading:first").click();

...但要看您的具體要求是什麼。

Demo.

來源

2012-12-13 10:26:20 karim79

你們的演示工作得很好，但是當我將它實現到我的代碼中時，它似乎並不像所有的一樣工作。我認爲這與jQuery鏈接有關（「。heading：first」）。click（）; – ragebunny

不用擔心，我現在已經排序了。我記得前一陣子，從jfiddle複製代碼似乎是javascripts的一個壞主意。也許它與他們在網站上對文本進行編碼的方式有關，但是我刪除了文本並逐字輸入，並且它工作得很好。非常感謝你的幫助。 – ragebunny

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".content").hide(); 
     //toggle the componenet with class msg_body 

     jQuery(".heading").click(function() 
     { 
     jQuery("article.opened div.content").hide().parent().removeClass('opened'); 
     jQuery(this).parent().addClass('opened'); 
     jQuery(this).next(".content").slideToggle(500); 
     }); 

     jQuery(".heading:first").click(); 
    }); 
</script>

來源

2012-12-13 10:29:08

您可以一行添加到您的代碼：

 jQuery(this).next(".content").slideToggle(500); 
     jQuery(this).parent().siblings().children(".content").slideUp(500); 
    //this will find all other .content open and closes when other link cliked.

和點擊事件中第一個標題：

 jQuery(".heading:first").click();

來源

2012-12-13 10:35:07 Jai

$(function() { 
    $('.content').hide(); 
    $('.content:first').show(); 

    $('.heading').click(function() { 
     $('.content').hide(); 
     $(this).next('.content').slideToggle(500); 
    }); 
});

來源

2012-12-13 10:36:26 bobthyasian

可以隱藏所有的內容，但第一個一個這樣的：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".content").hide(); 
     jQuery(".content:first").show(); 

     jQuery(".heading").click(function() { 
      jQuery(".content").slideUp(); 
      jQuery(this).next(".content").slideToggle(500); 
     }); 
    }); 
</script>

來源

2012-12-13 10:41:19

此解決方案是否可以在兩個方向上工作？這是當你點擊下一個項目或前一個項目時。我看到你使用'jQuery（this）.next（「。content」）'這會不會總是顯示一個？ –

[http://jsfiddle.net/anovoselnik/MTQys/ –

測試它，看到它的作品:) –

JQuery容器操作

回答

相關問題