Question

我一直在研究自举手风琴。我想隐藏第2步到第5步，它只会在用户点击下一步时显示。我这里有我的代码，只是jquery的新手。

      $(document).ready(function() {

    var accordion = $("div.panel-group>div.panel.panel-default");
    var accordion_step = 1;

    $('.next').on('click',function(){

      if ($(accordion).hasClass('hidden')) {
          $(accordion).removeClass('hidden');
      }
      return false;
    });
  });

先谢谢你们。

Answer 1

这可能会对你有所帮助：

＆＃13;

 $(document).ready(function() {


    $('.next').on('click',function(){

      var currentPanel = $(this).closest("div.panel.panel-default");
      var nextPanel = currentPanel.next();
      
      if ($(nextPanel).hasClass('hidden')) {
          $(nextPanel).removeClass('hidden');
          $(nextPanel).find(".panel-title a").click();
      }
      else
        {
          $(nextPanel).find(".panel-title a").click();
        }
      return false;
    });
  });

＆＃13;

    .bs-example{
    	margin: 20px;
    }

.hidden{
  display: nonoe;
  }

＆＃13;

<!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.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
</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>
                  <p><span class="next">Go to Next</span></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default hidden">
            <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>
                  <p><span class="next">Go to Next</span></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default hidden">
            <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>
</div>
</body>
</html>

＆＃13;

Bootstrap Accordion一步一步

1 个答案: