Javascript 引导崩溃无响应_Javascript_Jquery_Twitter Bootstrap

Javascript 引导崩溃无响应

javascript jquery twitter-bootstrap

Javascript 引导崩溃无响应,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我目前正在制作一个列表，通过文本字段根据用户输入创建类别。每次单击create按钮时，都会调用MyJavaScript并添加一个可折叠的div以显示列表现在，我只有一个按钮下面折叠，但将有额外的内容后，我可以得到折叠操作 HTML:JQuery UI用于以后可能的拖放功能： <link href="main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://a

我目前正在制作一个列表，通过文本字段根据用户输入创建类别。每次单击create按钮时，都会调用MyJavaScript并添加一个可折叠的div以显示列表

现在，我只有一个按钮下面折叠，但将有额外的内容后，我可以得到折叠操作

HTML:JQuery UI用于以后可能的拖放功能：

<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.3.0.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" 
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<!-- 
Bootstrap is a lightweight and relativley flexible framework that is great for responsive sites.
Although there are some downsides, as with almost anything, it is great for getting a good looking site up and running quickly.
This would allow this To Do List to be used just as easily on a mobile device while still maintaining an attractive look. 
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="container">
        <div class="h1 row text-center" id="main-header">To Do List</div>

        <div class="row" id="category-anchor">
            <div role="form" class="form-inline">
                <label id="category-label">New Category: </label>
                <input type="text" id="new-category" class="form-control">
                <button id="create-category" class="btn btn-primary form-control" onClick="createCategory()">Create</button>
            </div>
        </div>
        <li id="anchor">
        </li>

    </div>

</body>
<script src="todo.js"></script>
</html>

JavaScript:

var categoryID = 0;
var todoListID = 1000;

function createCategory() {
    var newCategory = document.getElementById("new-category").value;
    if(newCategory.trim().length != 0) {
        var categoryRow = '<div id="' + categoryID + '" class="category">';
        categoryRow += '<div class="h2 row text-center" data-toggle="collapse" data-target="#' + todoListID + '">' + newCategory + '</div>';
        categoryRow += '</div>';
        document.getElementById("new-category").value = "";
    }

    $(categoryRow).appendTo("#anchor");

    addToDoList();
    categoryID++;
    todoListID++;
}

function addToDoList() {
    var list = '<div id="' + todoListID + '" class="list collapse">';
    list += '<div class="row">';
    list += '<button class="btn btn-success create-list">New ToDo</button>';
    list += '</div>';
    list += '</div>';

    $(list).appendTo("#" + categoryID);
}

var categoryID=0；
todoListID变量=1000；
函数createCategory（）{
var newCategory=document.getElementById（“新类别”）.value；
if（newCategory.trim（）.length！=0）{
var categoryRow=“”；
categoryRow+=''+新类别+''；
categoryRow+=''；
document.getElementById（“新类别”）.value=“”；
}
$（categoryRow）。附录（“锚”）；
addToDoList（）；
categoryID++；
todoListID++；
}
函数addToDoList（）{
var列表=“”；
列表+=''；
列表+=‘新待办事项’；
列表+=''；
列表+=''；
$（列表）。附加到（“#”+类别ID）；
}

如果我使用“collapse in”，按钮会显示，但上面的div仍然不可折叠。

A显示html、css和jquery将是一个巨大的帮助。按钮没有正确关闭。它以一个结束的

div

标记结束，而不是

漂亮的捕获！不幸的是，问题仍然存在。我仍然不完全理解你的问题。你是说只有第一个类别是可折叠的，所有其他类别都不是？没有一个是可折叠的。我看不到内容，但它存在于DOM中。如果我加入“列表折叠”，而不仅仅是“列表折叠”，我可以看到内容，但折叠功能仍然不可用。

var categoryID = 0;
var todoListID = 1000;

function createCategory() {
    var newCategory = document.getElementById("new-category").value;
    if(newCategory.trim().length != 0) {
        var categoryRow = '<div id="' + categoryID + '" class="category">';
        categoryRow += '<div class="h2 row text-center" data-toggle="collapse" data-target="#' + todoListID + '">' + newCategory + '</div>';
        categoryRow += '</div>';
        document.getElementById("new-category").value = "";
    }

    $(categoryRow).appendTo("#anchor");

    addToDoList();
    categoryID++;
    todoListID++;
}

function addToDoList() {
    var list = '<div id="' + todoListID + '" class="list collapse">';
    list += '<div class="row">';
    list += '<button class="btn btn-success create-list">New ToDo</button>';
    list += '</div>';
    list += '</div>';

    $(list).appendTo("#" + categoryID);
}