引導面板未發生click事件

Question

我正在嘗試使用可使用Bootstrap和jQuery打開和關閉內容的面板來制作自己的類（不是手風琴，我想一次打開多個面板）。 但是，單擊事件對我不起作用，我也不知道為什么...我嘗試了“ *”選擇器，並且警報正在起作用，但是當我嘗試將其與特定元素相關聯時，它卻不起作用。

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

引導面板未發生click事件

問題描述

Practice2.html

script.js

styles.css

2 個解決方案

解決方案1
1 2015-08-11 02:04:20

解決方案2
1 已采納 2015-08-11 02:28:35

引導面板未發生click事件

問題描述

Practice2.html

script.js

styles.css

2 個解決方案

解決方案1 1 2015-08-11 02:04:20

解決方案2 1 已采納 2015-08-11 02:28:35

解決方案1
1 2015-08-11 02:04:20

解決方案2
1 已采納 2015-08-11 02:28:35