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

How to hide paragraph and make visible with heading click using Javascript

提问by tdrsam

I have a question about Javascript. I want to set some paragraphs on my page to hidden when the page loads, then have the paragraphs accessed by clicking on the heading. This is the html:

我有一个关于 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>

And this is the Javascript I have that isn't working:

这是我无法使用的 Javascript：

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;

I'm getting an error saying that an identifier is expected in the first line of the Javascript but I can't think what that could be. Help please?

我收到一条错误消息，说 Javascript 的第一行需要一个标识符，但我想不出那是什么。请帮忙？

回答by tdrsam

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

});

Obviously with this the jquery.js file has to be attached to the document as well.

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

回答by bcorso

As @Notulysses says, you're error (or one of them) is due to trying to set a style on a list of elements instead of the individual elements. However, I also want to recommend a different, more structured approach to achieving what you want.

正如@Notulysses 所说，您的错误（或其中之一）是由于尝试在元素列表而不是单个元素上设置样式。但是，我也想推荐一种不同的、更有条理的方法来实现你想要的。

Here's a jsfiddledemonstrating the code below.

这是一个 jsfiddle演示下面的代码。

Try the following.

请尝试以下操作。

1. Put each story in it's own <div class="story">(the "story" class will allow you to access it easily in js).
2. In each story add the heading <h3>Heading</h3>and news <p class="news">(the "news" class will allow you to access it easily through js).
3. Finally use addEventListener("click",...)to toggle "hide" on a "news" class when a "story" is clicked.

1. 将每个故事放在自己的位置<div class="story">（“故事”类将允许您在 js 中轻松访问它）。
2. 在每个故事中添加标题<h3>Heading</h3>和新闻<p class="news">（“新闻”类将允许您通过 js 轻松访问它）。
3. 最后用于addEventListener("click",...)在单击“故事”时在“新闻”类上切换“隐藏”。

HTML

HTML

    <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>

Javascript

Javascript

    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
            }
        });
    }

CSS

CSS

    .hide{
        display: none;
    }

回答by bcorso

@user2964055's had a great answer using JQuery, however I would suggest a couple things differently.

@user2964055 使用 JQuery 给出了很好的答案，但是我会提出一些不同的建议。

1. I would use Classes instead of IDsfor the stories (unless the styling or actions of e.g. #story1is different from #story2). Using classes will allow you to remove the redundancy shown in @user2964055's answer by using a single $('.story')to set the style and action of all stories at once.

2. I would replace the .find('p'), .find('h3'), and .next()with queries that are less coupled with the choice and placement of HTML tags; e.g:

   • .find('p') => .find('.news')
   • .find('h3') => .find('.title')
   • .next() => .sibling('.news')

   This will allow you to change the tags (e.g. if title tag changes h3to h2) without affecting the javascript.

1. 对于故事，我会使用类而不是 ID（除非 eg 的样式或动作与#story1不同#story2）。使用类将允许您通过使用单个$('.story')来一次设置所有故事的样式和动作来消除@user2964055 的答案中显示的冗余。

2. 我会将.find('p'), .find('h3'), 和替换为.next()与 HTML 标签的选择和位置耦合较少的查询；例如：

   • .find('p') => .find('.news')
   • .find('h3') => .find('.title')
   • .next() => .sibling('.news')

   这将允许您更改标签（例如，如果标题标签更改h3为h2）而不会影响 javascript。

The following will find every .storyclass and toggle the visibility of the .newscontent when the .titleis clicked (jsfiddle here).

以下将找到每个.story类并.news在.title单击时切换内容的可见性（此处为jsfiddle）。

HTML

HTML

<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>

Javascript

Javascript

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
            });
});

回答by Sooraj Thekkepatt

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