为什么JS代码阻止超链接工作?

时间:2017-12-08 03:07:53

标签: javascript

我使用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>

1 个答案:

答案 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>代码执行默认操作,即导航到新页面。

你只希望在点击正确的东西而不是点击任何东西时发生这种情况。