如何使用Javascript隐藏段落并使标题单击可见

我有一个关于Javascript的问题。我想在页面加载时将页面上的某些段落设置为隐藏，然后通过单击标题访问这些段落。这是html：

<div id="rightside">
    <div id="story1">
        <h3>Spice Girls premiere new song</h3>
        <p class="news"> 
            <em>Headlines (Friendship Never Ends)</em> 
            is the first new single from the reformed girl band since 2000 and is the official Children In Need track for 2007.
        </p>
        <p class="news">
            Geri Halliwell, Victoria Beckham, Melanie Brown, Melanie Chisholm and Emma Bunton have regrouped to promote a new Spice Girls' greatest hits album and an upcoming world tour.  <a href="#">more ...</a>
        </p>
    </div>
</div>

---

我得到一个错误，说Javascript的第一行应该有一个标识符，但我不知道这是什么。请帮助？

正如@Notulysses所说，您的错误（或其中一个错误）是由于试图在元素列表而不是单个元素上设置样式。然而，我还想推荐一种不同的、更结构化的方法来实现您的目标

演示下面的代码

尝试以下方法

将每个故事放在它自己的

（“story”类将允许您在js中轻松访问它）

在每个故事中添加标题

heading

和新闻

（“news”类允许您通过js轻松访问它）

最后使用

addEventListener（“单击“，…）

在单击“故事”时切换“新闻”类上的“隐藏”

HTML

---

显然，jquery.js文件也必须附加到文档中。

@user2964055使用jquery有一个很好的答案，但是我会提出一些不同的建议

对于故事，我会使用类而不是id（除非

#story1

的样式或动作与

#story2

不同）。使用类将允许您通过使用单个

$（'.story'）

一次设置所有故事的样式和动作来删除@user2964055答案中显示的冗余

我会将

.find（'p'）

、

.find（'h3'）

和

.next（）

替换为与HTML标记的选择和放置耦合较少的查询；e、 g:

• .find（'p'）=>.find（'news'）

• .find（'h3'）=>.find（'.title'）

• .next（）=>.sibling（'.news'）

这将允许您在不影响javascript的情况下更改标记（例如，如果标题标记将

h3

更改为

h2

）

以下内容将查找每个

.story

类，并在单击

.title

时切换

.news

内容的可见性（）

HTML

---

我知道有点晚了，但我添加了另一个答案，并提出了一些改进user2964055答案的建议。

function hideElementByVisible('news'){
    document.getElementsByClassName('news').style.visibility = "none";
}

function showElementByDisplay('news',prop){
    if(prop == "block"){
        getElementsByClassName('news').style.display = "block";
    }
    else if(prop == "inline"){
        getElementsByClassName('news').style.display = "inline";
    }
}
window.onload=hideElementByVisible;

    <div id="rightside">
        <div class="story">
            <h3>Story 1</h3>
            <p class="news hide"> 
                <em>Headlines (Story 1!)</em> This is story1 news.
            </p>
        </div>

        <div class="story">
            <h3>Story 2</h3>
            <p class="news hide"> 
                <em>Headlines (Story 2!)</em> This is story2 news.
            </p>
        </div>
    </div>

    stories = document.getElementsByClassName('story');     
    for (var i = 0; i < stories.length; i++) {              // for each story
        stories[i].addEventListener("click", function () {  // add an onClick listener
            news = this.getElementsByClassName('news');     
            for (var j = 0; j < news.length; j++) {         // for each news in story
                news[j].classList.toggle('hide');           // toggle 'hide' on clicked
            }
        });
    }

    .hide{
        display: none;
    }

jQuery(document).ready(function() {

$('#story1').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

$('#story2').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

$('#story3').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

$('#story4').find('p').hide().end().find('h3').click(function(){
$(this).next().slideToggle();});

});

<div id="rightside">
    <div class="story">                               <------- this is a story
        <h3 class="title"> Story 1 </h3>              <------- it includes a title
        <p  class="news"> This is story1 news. </p>   <------- and (sibling) news
    </div>

    <div class="story">                               <------- Add as many stories
        <h3 class="title"> Story 2 </h3>                       as you want
        <p  class="news"> This is story2 news. </p>  
    </div>                                                       
</div>

jQuery(document).ready(function() {
    $('.story')                            // Filter: .stories
        .find('.news')                     // Filter: .stories .news
            .hide()                        // Hide all
            .end()                         // End current filter
        .find('.title')                    // Filter: .stories .title
            .click( function(){            // Set the onclick action
                $(this).siblings('.news')  // Filter: .stories .news (sibling of .title)
                .slideToggle();            // Toggle visibility
            });
});

jQuery(document).ready(function($) {
$('p').hide();      
    $('h4').click(function() {
        $(this).next().toggle();
    });
});