Question

我试图在每个月内获取信息，只需单击按钮即可切换，并根据信息是否显示更改按钮文本。我究竟做错了什么？页面的CSS存储在单独的文档中

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaJam Coffee House</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="javajam.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
    <script src="http:ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $(".toggle_container").show(); 
            $("button").click(function(){
            $(this).toggleClass("active").next().slideToggle("fast");

                if ($.trim($(this).text()) === 'Hide') {
                    $(this).text('Show More');
                } else {
                    $(this).text('Hide');        
                }

                return false; 
        });
        $("a[href='" + window.location.hash + "']").parent(".reveal").click();
        });

    </script>
</head>

<body>
    <div id="wrapper">
    <header>
        <h1>JavaJam Coffee Class</h1>
    </header>

    <nav>

        <ul>

            <li><a href="index.html"> Home </a></li>
            <li><a href="menu.html"> Menu </a></li>
            <li><a href="music.html"> Music</a></li>
            <li><a href="jobs.html"> Jobs</a></li>

        </ul>

    </nav>

    <main>
        <p>
        The first Friday night each month at JavaJam is a special night. Join us from
        8pm to 11pm for some music you won&rsquo;t want to miss!
        </p>

        <h2>January</h2>
        <div class="toggle_container">
            <p>
                <p class="details">
                <a href="images/melanie.jpg">
                <img src="images/melaniethumb.jpg" height="80" width="80" alt="Melanie Morris thumbnail" class="floatleft">
                </a>
                Melanie Morris entertains with her melodic folk style. Check out 
                the podcast! CDs are now available.
            </p>
            <button>Hide </button>
        </div>      

        <h2>February</h2>
        <div class="toggle_container">
            <p>
                <p class="details">
                <a href="images/greg.jpg">
                <img src="images/gregthumb.jpg" height="80" width="80" alt="Tahoe Greg thumbnail" class="floatleft">
                </a>
                Tahoe Greg&rsquo;s back from his tour. New songs. New stories. CDs are now available.
            </p>
            <button>Hide </button>
        </div>      

    </main>

    <footer>
        Copyright &copy; JavaJam Coffee House
        <br>
        <a href="mailto:jonathan@smith.com">jonathan@smith.com</a>
    </footer>
    </div>
</body>
</html>

Answer 1

你正在寻找这个吗？

＆＃13;

$(document).ready(function(){
            $(".toggle_container").show(); 
            $("button").click(function(){
            $(this).toggleClass("active").prev().slideToggle("fast");

                if ($.trim($(this).text()) === 'Hide') {
                    $(this).text('Show More');
                } else {
                    $(this).text('Hide');        
                }

                return false; 
        });
        $("a[href='" + window.location.hash + "']").parent(".reveal").click();
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <header>
        <h1>JavaJam Coffee Class</h1>
    </header>

    <nav>

        <ul>

            <li><a href="index.html"> Home </a></li>
            <li><a href="menu.html"> Menu </a></li>
            <li><a href="music.html"> Music</a></li>
            <li><a href="jobs.html"> Jobs</a></li>

        </ul>

    </nav>

    <main>
        <p>
        The first Friday night each month at JavaJam is a special night. Join us from
        8pm to 11pm for some music you won&rsquo;t want to miss!
        </p>

        <h2>January</h2>
        <div class="toggle_container">
            <p>
                <p class="details">
                <a href="images/melanie.jpg">
                <img src="images/melaniethumb.jpg" height="80" width="80" alt="Melanie Morris thumbnail" class="floatleft">
                </a>
                Melanie Morris entertains with her melodic folk style. Check out 
                the podcast! CDs are now available.
            </p>
            <button>Hide </button>
        </div>      

        <h2>February</h2>
        <div class="toggle_container">
            <p>
                <p class="details">
                <a href="images/greg.jpg">
                <img src="images/gregthumb.jpg" height="80" width="80" alt="Tahoe Greg thumbnail" class="floatleft">
                </a>
                Tahoe Greg&rsquo;s back from his tour. New songs. New stories. CDs are now available.
            </p>
            <button>Hide </button>
        </div>      

    </main>

    <footer>
        Copyright &copy; JavaJam Coffee House
        <br>
        <a href="mailto:jonathan@smith.com">jonathan@smith.com</a>
    </footer>
    </div>

＆＃13;

Answer 2

.details元素是所点击按钮的上一个兄弟，因此请使用.prev()代替.next()。

同样在你的html中，在p元素之前还有一个额外的p.details元素，将其删除。

$(document).ready(function () {
    $(".toggle_container").show();
    $("button").click(function () {
        $(this).toggleClass("active").prev().slideToggle("fast");

        if ($.trim($(this).text()) === 'Hide') {
            $(this).text('Show More');
        } else {
            $(this).text('Hide');
        }

        return false;
    });
    $("a[href='" + window.location.hash + "']").parent(".reveal").click();
});

演示：Fiddle

Jquery切换不按预期运行。试图独立切换部分

2 个答案: