Div 幻灯片 单击链接

Div Slide on Click with links

本文关键字：链接 单击 幻灯片 Div      更新时间：2023-09-30

如果我有一个在单击时滑动的div，就像在此示例中找到的那样：http://jsfiddle.net/EVyE8/1229/

<div id="slide">click me
<br><a href="#">here is some more text</a>
<br><a href="#">here is some more text</a>
<br><a href="#">here is some more text</a>
<br><a href="#">here is some more text</a>
<br><a href="#">here is some more text</a></div>

JS:
document.getElementById('slide').addEventListener('click', function() {
(this.style.height == '50px' || this.style.height == '') ? this.style.height     
= '150px': this.style.height = '50px';
}, false);

如果我单击div 并且它滑动展开，我想在div 的隐藏部分有链接，我需要考虑什么。 如果单击这些链接，我希望div 保持打开状态，直到单击div 本身的打开部分。

我是js的新手，并且正在避免jquery，因为我想提高我对JS的熟练程度，所以任何帮助将不胜感激。

Click me 没有锚点或元素，给它一个锚点并将 eventListener 放在锚点上。示例：http://jsfiddle.net/EVyE8/1231/

<div id="slide"><a href="#" id="slide_click">click me</a><br><a href="#">here is some more text</a></div>
document.getElementById( 'slide_click' ).addEventListener( 'click', function() {
( this.parentElement.style.height == '50px' || this.parentElement.style.height == '' )
    ? this.parentElement.style.height = '150px' 
    : this.parentElement.style.height = '50px';

}， 假 (;

您可以通过

检测div子a标记上的点击来阻止该事件。 这样的东西会起作用：

var locked = false;
document.getElementById( 'slide' ).addEventListener( 'click', function() {
    if(!locked) {
        ( this.style.height == '50px' || this.style.height == '' )
            ? this.style.height = '150px' 
            : this.style.height = '50px';
    }
    locked = false;
}, false );

var anchors = document.querySelectorAll( '#slide a' )
for(var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener( 'click', function() {
        locked = true;
    })
}

JS小提琴示例：http://jsfiddle.net/igor_9000/EVyE8/1235/

希望对您有所帮助！

相关文章：