Question

我目前正在制作一个列表，根据用户输入通过文本字段创建类别。每次单击“创建”按钮时，我的JavaScript都会被调用，并添加一个应该可折叠的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>

这是我的一小部分CSS：

* {
    font-family: Serif;
}

#main-header {
    font-weight: bold;
    background-color: #00ffff;
    margin-top: 0px;
}

#category-label {
    font-size: 150%;
}

#create-category {
    font-weight: bold;
    font-family: Sans-serif;
    font-size: 100%;
}

li {
    list-style-type: none;
}

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);
}

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

Bootstrap折叠无响应

0 个答案: