我对html和javascript相当新，所以这可能是一个非常简单的问题。我正在尝试创建一个工具，允许用户查看项目列表并单击每个项目以获取更多信息，但也有一些标准可以减少特定任务的列表。我找到了一个几乎正是我想要做的例子，但它没有使用主列表中的按钮。这是我用作模板http://jsfiddle.net/n3EmN/3/的示例 另外，我理解javascript的字符串部分，但我可以删除多少而不影响代码？我可以完全没有显示被删除的内容吗？
<!DOCTYPE html>
<html>
<head>
<pre id=result> </pre>
<style>
body {
background: #c4c4c4
}
</style>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 10px;
width: 340px;
border: 1px solid rgba(255,0,0,.5);
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
position: relative;
top: -40px;
left: 15px;
}
button.accordion.active, button.accordion:hover {
background-color: white;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 16px;
cursor: default;
background-color: rgba(255,0,0,0.65);
text-align: right;
font-size: 20px;
max-height: 0;
width: 308px;
overflow: hidden;
transition: max-height 0.2s ease-out;
position: relative;
top: -40px;
left: 15px;
}
</style>
<style>
button.accordian {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 15px;
width: 750px;
text-align: left;
font-size: 20px;
font-weight: bold;
border: none;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
position: relative;
top: -245px;
left: 500px;
z-index: 2;
}
button.accordian.active, button.accordian:hover {
background-color: white;
}
button.accordian:after {
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
div.pane {
padding: 0 16px;
cursor: default;
background-color: white;
border: 1px solid rgba(255,0,0,.5);
text-align: left;
font-size: 14px;
max-height: 0;
width: 716px;
overflow: hidden;
transition: max-height 0.2s ease-out;
position: relative;
top: -245px;
left: 500px;
z-index: 1;
}
</style>
<style>
.contact {
background-color: #eee;
padding: 5px;
color: #444;
text-align: center;
font-size: 18px;
height: 150px;
width: 250px;
border: 2px solid red;
position: relative;
top: -220px;
left: 15px;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/loadcontent.js" type="text/javascript"></script>
<script src="js/filter.js" type="text/javascript"></script>
<script src="js/loaddatafromxm1.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/prefixfree-1.0.7.js" type="text/javascript"></script>
<!-- <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> -->
<script src="js/loadXMLDoc.js" type="text/javascript"></script>
<script src="js/navisearch.js" type="text/javascript"></script>
<script src="js/popup.js" type="text/javascript"></script>
<script src="js/bootstrap-select.js" type="text/javascript"></script>
<script src="js/dropdown.js" type="text/javascript"></script>
<script src="js/dropdownsearch.js" type="text/javascript"></script>
<div class="pic" id="pic">
<p style="text-align: center;">
<img src="https://thisdayinwaterhistory.files.wordpress.com/2013/05/0518-dow-logo.jpg" style="width: 50%;"></img>
</p>
</div>
<div class="contact">
<p>
Contact: Someone
</p>
<p>
Email: person@email.com
</p>
<p>
Phone: (###)###-####
</p>
</div>
<button class="accordion"><b>Structure Type</b></button>
<div class="panel">
<li>
<a title="(Storage tank)">
<b>Storage tank</b>
<input name="sturcture" type="checkbox" value="storage" id="storage"></input>
</a>
</li>
<li>
<a title="(Furnace)">
<b>Furnace</b>
<input name="structure" type="checkbox" value="furnace" id="furnace"></input>
</a>
</li>
<li>
<a title="(Reactor/Agitator)">
<b>Reactor/Agitator</b>
<input name="structure" type="checkbox" value="reactor" id="reactor"></input>
</a>
</li>
<li>
<a title="(Steam Drum)">
<b>Steam Drum</b>
<input name="structure" type="checkbox" value="steam" id="steam"></input>
</a>
</li>
<li>
<a title="(Vertical/Horizontal Drum)">
<b>Vertical/Horizontal Drum</b>
<input name="structure" type="checkbox" value="drum" id="drum"></input>
</a>
</li>
<li>
<a title="(Jacketed Vessel)">
<b>Jacketed Vessel</b>
<input name="structure" type="checkbox" value="vessel" id="vessel"></input>
</a>
</li>
<li>
<a title="(Tower)">
<b>Tower</b>
<input name="structure" type="checkbox" value="tower" id="tower"></input>
</a>
</li>
<li>
<a title="(Building Roof)">
<b>Building Roof</b>
<input name="structure" type="checkbox" value="roof" id="roof"></input>
</a>
</li>
</div>
<button class="accordion"><b>Pipes</b></button>
<div class="panel">
<li>
<a title="(Large Diameter)">
<b>Greater than 12 inch diameter </b>
<input name="pipe" type="checkbox" value="large" id="large"></input>
</a>
</li>
<li>
<a title="(Small Diameter)">
<b>Less than 12 inch diameter </b>
<input name="pipe" type="checkbox" value="small" id="small"></input>
</a>
</li>
</div>
<button class="accordion"><b>Job Scope or Task</b></button>
<div class="panel">
<li class="">
<a title="(Internal Inspection)">
<b>Internal Inspection</b>
<input name="scope" type="checkbox" value="internal" id="internal"></input>
</a>
</li>
<li class="">
<a title="(External Inspection)">
<b>External Inspection</b>
<input name="scope" type="checkbox" value="external" id="external"></input>
</a>
</li>
<li class="">
<a title="(Underwater Inspection)">
<b>Underwater Inspection</b>
<input name="scope" type="checkbox" value="underwater" id="underwater"></input>
</a>
</li>
<li class="">
<a title="(Corrosion Mapping)">
<b>Corrosion Mapping</b>
<input name="scope" type="checkbox" value="corrosion" id="corrosion"></input>
</a>
</li>
<li class="">
<a title="(Thickness Testing)">
<b>UT Thickness Testing</b>
<input name="scope" type="checkbox" value="thickness" id="thickness"></input>
</a>
</li>
<li class="">
<a title="(Thermography)">
<b>Thermography</b>
<input name="scope" type="checkbox" value="thermography" id="thermography"></input>
</a>
</li>
<li class="">
<a title="(Cleaning)">
<b>Cleaning</b>
<input name="scope" type="checkbox" value="cleaning" id="cleaning"></input>
</a>
</li>
<li class="">
<a title="(Flare Lighting)">
<b>Flare Lighting</b>
<input name="scope" type="checkbox" value="flare" id="flare"></input>
</a>
</li>
</div>
<button class="accordion"><b>Job and Equipment Conditions</b></button>
<div class="panel">
<li>
<a title="(Dry/Empty)">
<b>Dry and/or Empty</b>
<input name="conditions" type="checkbox" value="dry" id="dry"></input>
</a>
</li>
<li>
<a title="(Contains Liquid)">
<b>Contains liquid</b>
<input name="conditions" type="checkbox" value="wet" id="wet"></input>
</a>
</li>
<li>
<a title="(Metallic)">
<b>Ferrous Material</b>
<input name="conditions" type="checkbox" value="ferrous" id="ferrous"></input>
</a>
</li>
<li>
<a title="(Non-Metallic)">
<b>Non-ferrous Material</b>
<input name="conditions" type="checkbox" value="non-ferrous" id="non-ferrous"></input>
</a>
</li>
</div>
<button class="accordion"><b>Distance of Work from Entry</b></button>
<div class="panel">
<li>
<a title="(Close To Entry)">
<b>Within 10 feet</b>
<input name="distance" type="checkbox" value="short" id="short"></input>
</a>
</li>
<li>
<a title="(Medium Distance From entry)">
<b>Between 10 and 25 feet</b>
<input name="distance" type="checkbox" value="medium" id="medium"></input>
</a>
</li>
<li>
<a title="(Somewhat Far From Entry)">
<b>Between 25 and 50 feet</b>
<input name="distance" type="checkbox" value="far" id="far"></input>
</a>
</li>
<li>
<a title="(Very Far From Entry)">
<b>Greater than 50 feet</b>
<input name="distance" type="checkbox" value="veryfar" id="veryfar"></input>
</a>
</li>
</div>
<button class="accordian" data-id="Nano Crawler" data-category="storage steam drum vessel tower large small internal dry wet ferrous close medium far"><b> Nano Crawler </b></button>
<div class="pane">
<li>
<a title="Nano Crawler">
<p style="text-align: center;">
<img src="http://www.inuktun-europe.com/crawler-vehicles/nanomag/nanomag09_front.jpg" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<button class="accordian" data-id="HD & Micromag" data-category="storage furnace reactor steam drum vessel tower large small internal corrosion thickness dry wet ferrous close medium far"><b> HD & Micromag </b></button>
<div class="pane">
<li>
<a title="Micromag">
<p style="text-align: center;">
<img src="http://www.inuktun-europe.com/crawler-vehicles/micromag/micromag-magnetic-vertical-crawler-vehicle-2.png" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<button class="accordian" data-id="Versatrax 100" data-category="storage large small internal dry wet ferrous non-ferrous close medium far"><b> Versatrax 100 </b></button>
<div class="pane">
<li>
<a title="Versatrax 100">
<p style="text-align: center;">
<img src="http://img.nauticexpo.com/images_ne/photo-g/39946-333259.jpg" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<button class="accordian" data-id="Versatrax 50" data-category="storage large small internal dry wet ferrous non-ferrous close medium far"><b> Versatrax 50 </b></button>
<div class="pane">
<li>
<a title="Versatrax 50">
<p style="text-align: center;">
<img src="https://static1.squarespace.com/static/54da86e7e4b0d304c267efaf/t/58e28bad1b631bf0ffe965ca/1491241965875/Versatrax+50%E2%84%A2" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<button class="accordian" data-category="storage external cleaning flare dry wet close medium far veryfar"><b> 510 Packbot </b></button>
<div class="pane" data-id="510 Packbot">
<li>
<a title="510 Packbot">
<p style="text-align: center;">
<img src="http://endeavorrobotics.com/media/images/products/510-main.jpg" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<button class="accordian" data-id="Flyability Elios" data-category="storage furnace reactor steam drum vessel tower roof large internal external thermography dry ferrous non-ferrous close medium far veryfar"><b> Flyability Elios </b></button>
<div class="pane">
<li>
<a title="Elios">
<p style="text-align: center;">
<img src="http://www.unmannedsystemstechnology.com/wp-content/uploads/2016/05/Flyability-Elios-Collision-Tolerant-UAV.jpg" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<button class="accordian" data-id="SeaBotix ROV" data-category="underwater wet close medium far"><b> SeaBotix ROV </b></button>
<div class="pane">
<li>
<a title="SeaBotix ROV">
<p style="text-align: center;">
<img src="http://images.marinetechnologynews.com/images/maritime/w800h500/seabotix-vlbv-41253.jpg" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<button class="accordian" data-id="VideoRay Sub" data-category="underwater wet close medium far"><b> VideoRay Sub </b></button>
<div class="pane">
<li>
<a title="VideoRay Sub">
<p style="text-align: center;">
<img src="http://www.hydrographic-catalogue.com/photos/big/336-3-video-ray-pro4-rov.jpg" style="width: 200px; height: 200px;"></img>
</p>
</a>
</li>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
<script>
var acc = document.getElementsByClassName("accordian");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
<script data-type="javascript">
var byStructure = [], bySize = [], byScope = [], byCondition = [], byDistance = [];
$("input[name=structure]").on( "change", function() {
if (this.checked) byStructure.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byStructure, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=pipe]").on( "change", function() {
if (this.checked) bySize.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(bySize, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=scope]").on( "change", function() {
if (this.checked) byScope.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byScope, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=conditions]").on( "change", function() {
if (this.checked) byCondition.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byCondition, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=distance]").on( "change", function() {
if (this.checked) byDistance.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byDistance, "[data-category~='" + $(this).attr("value") + "']");
});
$("input").on( "change", function() {
var str = "Include items \n";
var selector = '', cselector = '', nselector = '';
var $lis = $('.accordian > button'),
$checked = $('input:checked');
if ($checked.length) {
if (byStructure.length) {
if (str == "Include items \n") {
str += " " + "with (" + byStructure.join(',') + ")\n";
$($('input[name=structure]:checked')).each(function(index, byStructure){
if(selector === '') {
selector += "[data-category~='" + byStructure.id + "']";
} else {
selector += ",[data-category~='" + byStructure.id + "']";
}
});
} else {
str += " AND " + "with (" + byStructure.join(' OR ') + ")\n";
$($('input[name=structure]:checked')).each(function(index, byStructure){
selector += "[data-category~='" + byStructure.id + "']";
});
}
}
if (byPipe.length) {
if (str == "Include items \n") {
str += " " + "with (" + byPipe.join(' OR ') + ")\n";
$($('input[name=pipe]:checked')).each(function(index, bySize){
if(selector === '') {
selector += "[data-category~='" + bySize.id + "']";
} else {
selector += ",[data-category~='" + bySize.id + "']";
}
});
} else {
str += " AND " + "with (" + bySize.join(' OR ') + ")\n";
$($('input[name=pipe]:checked')).each(function(index, bySize){
if(cselector === '') {
cselector += "[data-category~='" + bySize.id + "']";
} else {
cselector += ",[data-category~='" + bySize.id + "']";
}
});
}
}
if (byScope.length) {
if (str == "Include items \n") {
str += " " + "with (" + byScope.join(' OR ') + ")\n";
$($('input[name=scope]:checked')).each(function(index, byScope){
if(selector === '') {
selector += "[data-category~='" + byScope.id + "']";
} else {
selector += ",[data-category~='" + byScope.id + "']";
}
});
} else {
str += " AND " + "with (" + byScope.join(' OR ') + ")\n";
$($('input[name=scope]:checked')).each(function(index, byScope){
if(nselector === '') {
nselector += "[data-category~='" + byScope.id + "']";
} else {
nselector += ",[data-category~='" + byScope.id + "']";
}
});
}
}
if (byCondition.length) {
if (str == "Include items \n") {
str += " " + "with (" + byCondition.join(' OR ') + ")\n";
$($('input[name=condition]:checked')).each(function(index, byCondition){
if(selector === '') {
selector += "[data-category~='" + byCondition.id + "']";
} else {
selector += ",[data-category~='" + byCondition.id + "']";
}
});
} else {
str += " AND " + "with (" + byCondition.join(' OR ') + ")\n";
$($('input[name=condition]:checked')).each(function(index, byCondition){
if(nselector === '') {
nselector += "[data-category~='" + byCondition.id + "']";
} else {
nselector += ",[data-category~='" + byCondition.id + "']";
}
});
}
}
if (byDistance.length) {
if (str == "Include items \n") {
str += " " + "with (" + byScope.join(' OR ') + ")\n";
$($('input[name=distance]:checked')).each(function(index, byDistance){
if(selector === '') {
selector += "[data-category~='" + byDistance.id + "']";
} else {
selector += ",[data-category~='" + byDistance.id + "']";
}
});
} else {
str += " AND " + "with (" + byDistance.join(' OR ') + ")\n";
$($('input[name=distance]:checked')).each(function(index, byDistance){
if(nselector === '') {
nselector += "[data-category~='" + byDistance.id + "']";
} else {
nselector += ",[data-category~='" + byDistance.id + "']";
}
});
}
}
$lis.hide();
console.log(selector);
console.log(cselector);
console.log(nselector);
if (cselector === '' && nselector === '') {
$('.accordian > button').filter(selector).show();
} else if (cselector === '') {
$('.accordian > button').filter(selector).filter(nselector).show();
} else if (nselector === '') {
$('.accordian > button').filter(selector).filter(cselector).show();
} else {
$('.accordian > button').filter(selector).filter(cselector).filter(nselector).show();
}
} else {
$lis.show();
}
$("#result").html(str);
});
function removeA(arr) {
var what, a = arguments, L = a.length, ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax= arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
</script>
</body>
</html>