Показать/скрыть информацию наClick

Question

сообщество!

Идея состоит в том, чтобы создать список с обычным списком с текстом, а иногда и с интерактивными ссылками.

Проблема:
Как сделать этот список закрытым только при нажатии кнопки, а не когда пользователь нажимает на любой элемент внутри списка или где-либо на экране.

Fiddle:jsfiddle.net/H2Chj/494/

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

Единственное, чего вам не хватало, это прекратить распространение, когда вы нажимаете ссылку в раскрывающемся списке. это останавливает его от барботажа до обработчика события $ (document) .click.

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

Я предполагаю, что вы имели $ (документ) .click обработчик там, чтобы вы могли закрыть выпадающий список, щелкнув вне выпадающего меню.

увидеть эту скрипку:. http://jsfiddle.net/o0m8p4bf/2/

Answer 2

Пожалуйста, используйте этот код яваскрипта:

$(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"));} 
}); 

});