Div 滑动点击链接

Question

如果我有一个 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 的熟练程度，所以任何帮助将不胜感激。

Answer 1

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';

}, 错误);

Answer 2

您可以通过检测对其子 a 标签的点击来阻止来自 div 的点击事件。像这样的东西会起作用：

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 Fiddle 示例：http://jsfiddle.net/igor_9000/EVyE8/1235/

希望对您有所帮助！

Div 滑动点击链接

Div Slide on Click with links

html

javascript

css

slide