Question

我试图使用Bootstrap和jQuery打开和关闭内容的面板创建我自己的类（不是手风琴，我希望一次打开多个）。但是，点击事件对我来说并不起作用，我不知道为什么......我试过了＆＃34; *＆＃34;选择器和警报工作正常，但当我尝试将其与特定元素关联时，它无法正常工作。

Practice2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Practice 2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../static/css/prism.css">
    <link rel="stylesheet" href="../static/css/styles.css">

    <script src="../static/js/prism.js"></script>
    <script src="../static/js/script.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="panel panel-default panel-toggle" id="demo">
        <div class="panel-heading">solution</div>
        <div class="panel-body">
            <code class="language-python">
            def solution(self):
                func = self.functionGenerator()
                length = self.endTime - self.initialTime
                timesConcerned = [self.initialTime+x/1000. for x in range(length*1000)]
                return odeint(func,self.initialValues,timesConcerned)
            </code><br>
        Explanation
        </div>
    </div>
</div>
</body>
</html>

的script.js

// $(".panel-toggle:panel-header").click(function(){
//  // $(this).next().toggle();
//  alert("hello");
// });

$("#demo").click(function(){
    alert("hello");
});

styles.css的

.panel-toggle .panel-heading:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: grey;
}
.panel-toggle .collapsed:after {
    content:"\e080";
}
.panel-toggle .panel-body {

}

显然，其余代码需要进行一些调整，但我现在只是对此部分进行故障排除，并希望对我所缺少的内容提出一些建议。谢谢！

Answer 1

你应该把你的jQuery代码放在document.ready块中，确保代码在生成这些元素之后工作。

Script.js 应该像这样改变。

$(document).ready(function(){
  $("#demo").click(function(){
    alert("hello");
  });
});

Answer 2

用

<强> HTML

<div class="panel panel-default panel-toggle">
    <div class="panel-heading">solution</div>
    <div class="panel-body">
        <code class="language-python">
        def solution(self):
            func = self.functionGenerator()
            length = self.endTime - self.initialTime
            timesConcerned = [self.initialTime+x/1000. for x in range(length*1000)]
            return odeint(func,self.initialValues,timesConcerned)
        </code>
    Explanation
    </div>
</div>

<强> JS

$(document).ready(function(){
    $(".panel-heading").click(function(){
        $(this).next().toggle("slow");
    });
});

工作

JSFiddle demo

使用引导程序面板

Practice2.html

的script.js

styles.css的

2 个答案: