Question

社区！

我们的想法是创建一个包含普通列表的列表，其中包含文本和有时可点击的链接。

问题：
如何使此列表仅在按下按钮时关闭，而不是在用户单击列表中的任何项目或屏幕上的任何位置时关闭。

HTML：

<button data-text-swap="Show" id="trigger">Hide</button>    
<div id="drop">   
<a href="#">Menu item 1</a>
    <a href="#">Menu item 2</a>
    <a href="#">Menu item 3</a>
    <a href="#">Menu item 4</a>
</div>

的Javascript

$(document).ready( function(){

$('#trigger').click( function(event){

    event.stopPropagation();

    $('#drop').toggle();

});

$(document).click( function(){

    $('#drop').hide();

});

$("button").on("click", function() {

    var el = $(this);

    if (el.text() == el.data("text-swap")) {

        el.text(el.data("text-original"));} 
    else {

        el.data("text-original", el.text());

        el.text(el.data("text-swap"));}
});

});

Answer 1

请使用此javascript代码：

$(document).ready( function(){

$("button").on("click", function() {


    $('#drop').toggle();

    var el = $(this);

    if (el.text() == el.data("text-swap")) {

        el.text(el.data("text-original"));} 
    else {

        el.data("text-original", el.text());

        el.text(el.data("text-swap"));}
 });

});

Answer 2

您丢失的一件事是当您点击下拉列表中的链接时停止传播。这会阻止它冒泡到$（document）.click事件处理程序。

$('#drop a').click(function(e){ e.stopPropagation(); });

我假设您有$（document）.click处理程序，因此您可以通过单击下拉菜单外部来关闭下拉列表。

看到这个小提琴：http://jsfiddle.net/o0m8p4bf/2/

显示/隐藏信息onClick

2 个答案: