html 折叠面板未打开链接

yhqotfr8  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(171)

这是一个html和js,我正在使用 accordion 。问题是当我点击链接它不打开。但当我点击链接它的中心打开正确的新标签。
我还必须使用表格格式的这些链接,所以我可以显示媒体发布的年度。
如果有帮助的话,下面是 accordion 的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');  
}
}
}  
}
});

我尝试添加这一行,但超链接工作和 accordion 不工作。

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

lf5gs5x21#

我找到的唯一解决办法就是这个。

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

相关问题