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

Question

I am trying to get the information within each month to toggle with the click of the button independently, and have the text of the button change based on if the information is shown or not. 我试图在每个月内获取信息，只需单击按钮即可切换，并根据信息是否显示更改按钮文本。 What am I doing wrong? 我究竟做错了什么？ The CSS for the page is stored in a separate document 页面的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

are you looking for this? 你在找这个吗？

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

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

Answer 2

The .details element is the previous sibling of the clicked button so use .prev() instead of .next() . .details元素是单击按钮的上一个兄弟，因此使用.prev()而不是.next() 。

Also in your html there is an extra p element before p.details element, remove it. 另外在你的html中，在p.details元素之前还有一个额外的p元素，将其删除。

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

Demo: Fiddle 演示：小提琴

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-03-03 05:06:33

解决方案2
0 2015-03-03 05:07:13

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-03-03 05:06:33

解决方案2 0 2015-03-03 05:07:13

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

解决方案1
0 已采纳 2015-03-03 05:06:33

解决方案2
0 2015-03-03 05:07:13