Question

我有以下代码，只要重新加载页面就会显示容器。我希望在点击<a>代码后可以看到容器。

例如，如果容器包含“hello world”，则在单击链接后应显示此文本，并且图标应更改为加号。

<html>
<head>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Antipasti</a>
            </h4>
        </div>
    <div id="panel1" class="panel-collapse collapse in">
        <div class="panel-body">
             hello world!!!
              </div>
          </div>
      </div>
  </div>


  <script type="text/javascript">
    var selectIds =$('#panel1');
    $(function ($) {


        selectIds.on('hidden.bs.collapse show.bs.collapse', function () {
          $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
  });

  </script>
</body>
</html>

Answer 1

从此行中删除课程in

<div id="panel1" class="panel-collapse collapse"><!-- <-- removed class "in" -->

Here's a bootply so you can see it in action

jquery accordion应该在点击标题div后显示内容

1 个答案: