Javascript Div带链接单击幻灯片

如果我有一个div在单击时滑动，如本例中所示：

点击我










JS:
document.getElementById（'slide'）。addEventListener（'click'，function（）{
（this.style.height=='50px'| | this.style.height=='''）？this.style.height
='150px'：this.style.height='50px'；
}，假）；

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

---

我是js新手，我避免使用jquery，因为我想提高我对js的熟练程度，因此任何帮助都将不胜感激。

单击我没有锚或元素，给它一个锚，然后将eventListener放在锚上。例如：

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

---

}，假）

单击我没有锚或元素，给它一个锚并将eventListener放在锚上。例如：

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

---

}，假）

通过检测子

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;
    })
}

var locked=false；
document.getElementById（'slide'）。addEventListener（'click'，function（）{
如果（！已锁定）{
（this.style.height==“50px”| this.style.height==”）
？this.style.height='150px'
：this.style.height='50px'；
}
锁定=错误；
}，假）；
var anchors=document.querySelectorAll（“#幻灯片a”）
对于（var i=0；i

JS小提琴示例：

---

希望有帮助

通过检测子

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;
    })
}

var locked=false；
document.getElementById（'slide'）。addEventListener（'click'，function（）{
如果（！已锁定）{
（this.style.height==“50px”| this.style.height==”）
？this.style.height='150px'
：this.style.height='50px'；
}
锁定=错误；
}，假）；
var anchors=document.querySelectorAll（“#幻灯片a”）
对于（var i=0；i

JS小提琴示例：

---

希望有帮助

太好了！非常感谢你！只有当div本身不是父元素时才能执行此操作。正确吗？正确，因为如果向父元素添加事件侦听器，父元素中的每次单击都将触发幻灯片打开/关闭。如果你想也能点击背景，你可以通过点击使用一个额外的背景div。这很有意义。在此基础上，由于我已将一个元素设置为控制一个动作的父元素，如果我还有一个要在单击时设置动画的图标，我可以使用原始父项同时控制幻灯片和动画吗？或者我需要为每一个单独的父元素吗？请将一个答案标记为正确答案，无论是我的答案还是Adam的答案都是正确的，这有助于未来的用户。（加上我们得到了一些熏肉）太好了！非常感谢你！只有当div本身不是父元素时才能执行此操作。正确吗？正确，因为如果向父元素添加事件侦听器，父元素中的每次单击都将触发幻灯片打开/关闭。如果你想也能点击背景，你可以通过点击使用一个额外的背景div。这很有意义。在此基础上，由于我已将一个元素设置为控制一个动作的父元素，如果我还有一个要在单击时设置动画的图标，我可以使用原始父项同时控制幻灯片和动画吗？或者我需要为每一个单独的父元素吗？请将一个答案标记为正确答案，无论是我的答案还是Adam的答案都是正确的，这有助于未来的用户。（加上我们得到了一些熏肉）

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;
    })
}