Question

对于三段文字jQuery，我想在点击时显示一段文字，再次点击时会隐藏。

以下是我目前的代码：

$(document).ready(function () {
$('.section').hide();
$('h3').click(function () {
    $(this).toggleClass("open");
    $(this).next().toggle();
}); //end toggle
});

假设您打开一个段落，然后单击另一个文本并展开第2段，我希望您打开的第一个段落在您单击以展开另一个时自动关闭（如果这是有意义的话）。我将如何继续这样做？

Answer 1

这是手风琴的行为 - 从（http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion）

查看以下Bootstrap手风琴

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>

Answer 2

你能提供一些HTML，但如果我理解的话

$(document).ready(function () {
$('.section').hide();
$('h3').click(function () {
    $(this).toggleClass("open");
    $(this).next().show();    //can use .slideDown()
     $(this).next().siblings('.section').hide();  //can use .slideUp()
}); //end toggle
});

这适用于：

<h3> heading section 1 </h3>
<div class="section">Section1</div>

<h3> heading section 2 </h3>
<div class="section">Section1</div>

<h3> heading section 3 </h3>
<div class="section">Section1</div>

Javascript使扩展的段落自动关闭

2 个答案: