我试图扩大和折叠一个按钮包括在侧导航栏。
按照这里给出的例子javascript expand/collapse button，我尝试包含一个切换展开和折叠按钮。但是当我点击它时，它显示错误，并且不按预期工作。
单击时，它应该显示项目列表（在尝试的示例中）。在真实的情况中，我希望包含输入字段框。
的数据
完整代码
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Visualization
</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kit.fontawesome.com/adf1f3a283.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/* collapse-expand */
$(function() {
var b = $("#button");
var w = $("#wrapper");
var l = $("#list");
b.click(function() {
w.toggleClass('open'); /* <-- toggle the application of the open class on click */
});
});
/* end of collaspe-expand */
window.addEventListener('load', function() {
getExampleValue();
});
</script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main-panel {
width: 100%;
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.side-panel {
position: absolute;
top: 80px;
bottom: 0;
right: -300px;
width: 300px;
background-color: #f2f2f2;
transition: right 0.5s;
overflow-y: auto;
padding: 20px;
}
.side-panel.open {
right: 0;
}
.right-arrow {
position: absolute;
top: 20px;
left: 20px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #2196F3;
cursor: pointer;
transition: transform .5s ease-out;
transform: rotate(180deg);
}
.open .right-arrow{
transform: rotate(0deg);
}
.left-arrow {
position: absolute;
top: 20px;
right: 20px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #2196F3;
cursor: pointer;
transition: transform .5s ease-out;
transform: rotate(180deg);
}
.open .left-arrow {
transform: rotate(0deg);
}
{# Added Code for side bar #}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 3;
top: 80px;
left: -200px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
/*.open .sidenav {
left: -20px;
}*/
.sidenav.open {
left: 0px;
}
.form{
transition: 0.1s;
opacity: 0;
}
.open .form{
left: -20px;
opacity: 1;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 250px;
}
.form {
opacity: 0;
border-radius: 20px;
box-sizing: border-box;
height: 500px;
padding: 20px;
width: inherit;
font-size: 1.8rem;
}
.title{
color: #eee;
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
font-size: 25px;
font-weight: 400;
padding-left: 15px;
}
.input-container {
height: 50px;
position: relative;
width: 100%;
font-size: 1em;
}
.soura {
margin-top: 40px;
}
.ic2 {
margin-top: 30px;
}
.input {
background-color: #303245;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
font-size: 18px;
height: 100%;
outline: 0;
padding: 4px 20px;
width: 100%;
}
.cut {
background-color: black;
border-radius: 10px;
height: 20px;
left: 20px;
position: absolute;
top: -20px;
transform: translateY(0);
transition: transform 200ms;
}
/*.input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut {
transform: translateY(10px);
height: 30px;
}*/
.arrowsize-cut{
width: 115px;
}
.concentration-cut{
width: 105px;
}
.example-cut{
width: 140px;
}
.labelsize-cut{
width: 80px;
}
.input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut {
transform: translateY(8px);
}
.placeholder {
color: #65657b;
font-family: sans-serif;
left: 20px;
line-height: 14px;
position: absolute;
transform-origin: 0 50%;
transition: transform 200ms, color 200ms;
top: 20px;
}
.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
transform: translateY(-30px) translateX(10px) scale(0.75);
}
.input:not(:placeholder-shown) ~ .placeholder {
color: #808097;
}
.input:focus ~ .placeholder {
color: #dc2f55;
}
.submit {
background-color: #08d;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
cursor: pointer;
font-size: 18px;
height: 30px;
margin-top: 38px;
outline: 0;
text-align: center;
width: 100%;
}
.submit:active {
background-color: #06b;
}
/* Adding the button */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Code for download button */
.hide {
max-height: 0 !important;
}
.dropdown{
position: relative;
display: inline-block;
background-color: #65657B;
border-radius: 500px;
padding: 5px;
/*top: -100px;*/
float: left;
margin: 0 auto;
}
.dropdown .title{
margin: .3em .3em .3em .3em;
width: 100%;
}
.dropdown .title .fa-angle-right{
float: right;
margin-right: .7em;
transition: transform .3s;
}
.dropdown .menu{
transition: bottom .5s ease-out;
background-color: black;
min-width: 18rem;
/* bottom: 7.9em; */
border: solid white;
overflow: hidden;
position: absolute;
font-size: 10px;
}
.dropdown .menu .option{
margin: .1em .1em .1em .1em;
margin-top: 0.3em;
color: white;
font-size: 10px;
}
.dropdown .menu .option:hover{
background: rgba(0,0,0,0.2);
}
.pointerCursor:hover{
cursor: pointer;
}
.rotate-90{
transform: rotate(-90deg);
}
.clickable {
cursor: pointer;
text-decoration: underline;
color: blue;
}
select#format-select {
background-color: #65657B;
color: #fff;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
border-radius: 7px;
display: inline-block;
}
.dropdown .download-button {
background-color: #65657B;
color: #000;
border: none;
outline: none;
cursor: pointer;
padding: 5px 45px;
border-radius: 5px;
position: relative;
text-align: center;
}
.dropdown .download-button i {
margin-top: 6px;
}
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
}
.title {
text-align: center;
}
#network .modebar {
top: 150px;
left: 200px;
}
/* collapse-expand*/
#wrapper {
background: #ccc;
overflow: hidden;
transition: max-height 300ms;
max-height: 0; /* <---hide by default */
}
#wrapper.open {
max-height: 100px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}
</style>
</head>
<body>
<div id = "main" style="margin-left: 7rem;">
<div id="mySidenav" class="sidenav open">
<div class="left-arrow" onclick="toggleNav()"></div>
<form class="form" id="myForm" action="{% url 'visualization' %}" method="post">
{% csrf_token %}
<div class = "title"> <i class="fas fa-cog"></i> </div>
<div class="input-container soura">
<input id="examples" class="input" name="examples" placeholder=" " value="ex1" onclick="getExampleValue()"/>
<div class="cut example-cut"></div>
<label for="examples" class="placeholder">
Examples
<span id="example1" class="example" onclick="setExampleValue('ex1')"> #1</span>
<span id="example2" class="example" onclick="setExampleValue('ex2')"> #2</span>
</label>
</div>
<button id="button">Toggle Expand/Collapse</button>
<div class="input-container soura" id="wrapper">
<ul id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="center-container">
<div class='dropdown'>
<select id="format-select" class="pointerCursor">
<option value="png">PNG</option>
<option value="svg">SVG</option>
<option value="jpeg">JPEG</option>
</select>
<button class="download-button"><i class="fa fa-download"></i></button>
</div>
</div>
<div class="graph-container">
<div id="network" class="main-panel"></div>
</div>
<script>
//read the data from the json file
function getCookie(name) {
const cookieValue = document.cookie
.split('; ')
.find(cookie => cookie.startsWith(name + '='));
if (cookieValue) {
return decodeURIComponent(cookieValue.split('=')[1]);
}
return null;
}
async function getExampleValue() {
const filename = document.getElementById("examples").value
console.log("filename")
console.log(filename)
// Attach an event listener to the button
var selection = document.getElementById('result-select').value;
console.log("result-select")
console.log(selection)
var temp = {filename: filename, option: selection}
const csrftoken = getCookie("csrftoken");
const url = "{% url 'visualization' %}"
await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": csrftoken
},
body: JSON.stringify(temp)
})
.then(response => response.json())
.then(data => {
var downloadBtn = document.querySelector('.download-button');
downloadBtn.addEventListener('click', function () {
var format = formatSelect.value;
console.log(format)
Plotly.toImage('network', {format: format, width: 800, height: 600})
.then(function (url) {
var link = document.createElement('a');
link.download = 'chart.' + format;
link.href = url;
link.click();
});
});
})
}
</script>
</div>
</body>
<script>
let navState = true;
function toggleNav(){
if(navState){
closeNav();
}else{
openNav();
}
navState = !navState;
}
function openNav() {
document.getElementById("mySidenav").classList.add("open");
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").classList.remove("open");
document.getElementById("main").style.marginLeft = "0px";
}
</script>
</html>字符串
建议包括一个字段，将展开显示内容和折叠时，点击将有很大的帮助。
1条答案
按热度按时间rqenqsqc1#
错误在JavaScript代码的第19行，在函数
getExampleValue()中。有一个名为selection的变量引用了一个id为'result-select'的元素，该元素不可用。因此，首先使用
id='result-select'添加input或textarea元素。由于缺少该元素而导致错误。19号线：
字符串