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

}，false）;

Answer 2

您可以通过检测点击它的子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/

希望有所帮助！

Div滑动单击链接

2 个答案: