手风琴不打开链接

Question

这是我用于手风琴的 html 和 js。 问题是当我点击链接时它没有打开。 但是当我集中点击链接时，它会在新标签页中正确打开。

我还必须以表格形式使用这些链接，这样我才能按年显示媒体发布。

如果有帮助，这里是手风琴 html：

<div class="container">
          <h1>Simple Flat UI CSS Accordion</h1>
          <div class="accordion">
            <dl>
              <dt><a class="accordionTitle accordionTitleActive" href="#">Test Simple Flat UI CSS Accordion 1</a></dt>
              <dd class="accordionItem">
                <table>
    <tbody>
        <tr>
            <td>22 September 2022</td>
            <td><a href="www.google.com">Google</a></td>
        </tr>
        <tr>
            <td>29 August 2022</td>
           <td><a href="https://www.facebook.com/">Facebook</a></td>
        </tr>
 
       
    </tbody>
</table>
              </dd>
              <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 2</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
              </dd>
             
            </dl>
          </div>
</div>

使用JS

( function( window ) {
'use strict';
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
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 = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
define( classie );
} else {
window.classie = classie;
}
})( window );
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
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\] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');  
}
}
}  
}
});

我尝试添加此行，但随后超链接正常工作，手风琴不工作。

.on('click', 'a', function(e) { e.stopPropagation(); })

Answer 1

我找到的唯一解决方案是这个。

<span onclick="event.stopPropagation();"> <a href="#"> link title </a> </span>