Question

我对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无效：

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;

我收到一条错误，说Javascript的第一行中有一个标识符，但我想不出那可能是什么。请帮忙吗？

Answer 1

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

});

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

Answer 2

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

Here's a jsfiddle演示了以下代码。

尝试以下方法。

将每个故事放入其中<div class="story">（＆＃34;故事＆＃34;类将允许您在js中轻松访问它）。
在每个故事中添加标题<h3>Heading</h3>和新闻<p class="news">（＆＃34; news＆＃34;类将允许您通过js轻松访问它）。
最后使用addEventListener("click",...)来切换＆＃34;隐藏＆＃34;在＆＃34;新闻＆＃34;当一个＆＃34;故事＆＃34;点击。

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

    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

    .hide{
        display: none;
    }

Answer 3

@ 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')
这样您就可以更改代码（例如，如果标题代码更改h3更改为h2），而不会影响javascript。

以下内容会查找每个.story课程，并在点击.news时.title切换<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>内容的展示位置。

HTML

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

的Javascript

{{1}}

Answer 4

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

如何使用Javascript隐藏段落并使用标题单击显示

4 个答案:

HTML

的Javascript

CSS

HTML

的Javascript