我使用HTML，CSS和JS创建了一个HTML手风琴。我添加到HTML列表的超链接不起作用。我假设JS出了问题，阻止超链接工作，但不知道出了什么问题。
下面是html列表
<div class="container">
<div class="acc">
<dl>
<dt><a class="acc_title" href="#">Business Intelligence</a></dt>
<dd class="acc_panel acc_panel_col">
<ul>
<li><a href="https://teams.connect.te.com/sites/ebs/bi/pages/home.aspx">TED 1.0-Cognos</a></li>
<li><a href="https://businessobjects.us.tycoelectronics.com/BOE/BI/">TED 2.0-SAP Business Objects</a></li>
</ul>
</p>
</dd>
<dt><a href="#" class="acc_title">Insights</a></dt>
<dd class="acc_panel acc_panel_col">
<ul>
<li><a href="https://teams.connect.te.com/sites/Insights/pages/home.aspx">Big Data analytics</a></li>
</ul>
</dd>
<dt><a href="#" class="acc_title">Finance</a></dt>
<dd class="acc_panel acc_panel_col">
<ul>
<li><a href="http://tebit.us.tycoelectronics.com/default.aspx">TEBIT:Project savings tracker</a></li>
<li><a href="http://fmd.tycoelectronics.com/RateInquiry.aspx">TE Currency Exchange rates</a></li>
</ul>
</dd>
<dt><a href="#" class="acc_title">Supply Chain</a></dt>
<dd class="acc_panel acc_panel_col">
<h3>Materials</h3>
<ul>
<li><a href="http://cpr/">Central Part Registry(CPR)</a></li>
<li><a href="https://bomnavigator.tycoelectronics.com/TECbca/view.faces
http://dcms/main_page.aspx">Bill of material navigator</a></li>
</ul>
<h3>Locations</h3>
<ul>
<li><a href="http://dcms/main_page.aspx">DC Management System</a></li>
<li><a href="http://supplynetwork.tycoelectronics.com/global/gsc/footprint.do">TE Locations</a></li>
</ul>
<h3>Freight</h3>
<ul>
<li><a href="http://qlikview/qlikView/">TMS information: Qlikview</a></li>
<li><a href="http://cognos/cognos/cgi-bin/cognosisapi.dll?b_action=xts.run&m=portal/welcome/welcome.xts
">Carrier information: Cognos Freight forwarder shipments</a></li>
</ul>
</dd>
<dt><a href="#" class="acc_title">SAP Reports</a></dt>
<dd class="acc_panel acc_panel_col">
<h3>Inbound</h3>
<ul>
<li>Vendor master: ZMM3TR046</li>
<li>Inbound lead times (ZTDY): ZMM3TR075</li>
<li>Cartons received by BU: ZMM3TR839</li>
<li>Dock to Stock time: ZMM4TR083</li>
</ul>
<h3>Warehouse</h3>
<ul>
<li>Warehouse occupation: LX04</li>
<li>Bin Occupations by profit center: ZMM4TR004</li>
<li>Weights and Volumes (ZZAPQ): ZSD4TR260</li>
<li>Location – material touches: MB51</li>
<li>Warehouse troughput time: ZSD4TR058</li>
</ul>
<h3>outbound</h3>
<ul>
<li>Customer master: ZSD5TR038</li>
<li>Customer partner listing: ZSD4TR218</li>
<li>Shipment report: ZSD3TR008N</li>
<li>Routes and route determination: ZSD4TR612</li>
<li>Shipping performance: ZSD3TR028</li>
<li>Carrier determination (ZV14): ZSD4TR407</li>
</ul>
<h3>Freight</h3>
<ul>
<li>Premium Freight: ZSD4TR708</li>
<li>Freight payments: ZFI2TI305</li>
</ul>
</dd>
</dl>
</div>
</div>
下面是JS代码
<script type="text/javascript">
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*/
(function(window) {
"use strict";
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ("classList" in document.documentElement) {
hasClass = function(elem, c) {
return elem.classList.contains(c);
};
addClass = function(elem, c) {
elem.classList.add(c);
};
removeClass = function(elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function(elem, c) {
return classReg(c).test(elem.className);
};
addClass = function(elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + " " + c;
}
};
removeClass = function(elem, c) {
elem.className = elem.className.replace(classReg(c), " ");
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if (typeof define === "function" && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);
//fake jQuery
var $ = function(selector) {
return document.querySelector(selector);
};
var accordion = $(".acc");
//add event listener to all anchor tags with accordion title class
accordion.addEventListener("click", function(e) {
e.stopPropagation();
e.preventDefault();
if (e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if (classes) {
for (var x = 0; x < classes.length; x++) {
if (classes[x] == "acc_title") {
var title = e.target;
//next element sibling needs to be tested in IE8+ for any crashing problems
var content = e.target.parentNode.nextElementSibling;
//use classie to then toggle the active class which will then open and close the accordion
classie.toggle(title, "acc_title_active");
//this is just here to allow a custom animation to treat the content
if (classie.has(content, "acc_panel_col")) {
if (classie.has(content, "anim_out")) {
classie.remove(content, "anim_out");
}
classie.add(content, "anim_in");
} else {
classie.remove(content, "anim_in");
classie.add(content, "anim_out");
}
//remove or add the collapsed state
classie.toggle(content, "acc_panel_col");
}
}
}
}
});
</script>
答案 0 :(得分：0)
移动这两行：
e.stopPropagation();
e.preventDefault();
从这里开始：
accordion.addEventListener("click", function(e) {
e.stopPropagation();
e.preventDefault();
到这里：
if (classes) {
for (var x = 0; x < classes.length; x++) {
if (classes[x] == "acc_title") {
e.stopPropagation();
e.preventDefault();
此e.preventDefault();阻止<a>代码执行默认操作，即导航到新页面。
你只希望在点击正确的东西而不是点击任何东西时发生这种情况。