javascript - 隐藏内容和 Jquery 2 点击触发

Question

我知道有一些相关的问题，但我想更清楚地问这个问题。我花时间在 jsfiddle 上复制我的问题（链接在底部）。

我有一个jQuery事件：

$(document).ready(function () {
    $('.ui.contact.selection.dropdown').on("click", function () {
         $(this).dropdown()
         ;
    })

}); 

下拉菜单位于模态框内，在单击 div 之前它实际上并不存在，其中

    $('.item.contact').on("click", function () {
        $('.ui.modal')
          .modal('show')
          ;
    })

问题是，当我加载模式，然后单击下拉菜单时，菜单在触发之前需要单击两次。我猜这是因为下拉菜单在页面加载时不可用。第一次点击加载它，第二次点击触发它？我不确定，但希望得到帮助！

请参阅jsfiddle

Answer 1

show在创建下拉列表时尝试设置选项：

$(this).dropdown('show', true)

小提琴：http: //jsfiddle.net/o8r0fzfg/8/

Answer 2

我尝试了下面的代码，它可以工作！

$(document).ready(function () {    
    $('.ui.contact.selection.dropdown').dropdown();    

    //CONTACT MODAL
    $('.item.contact').on("click", function () {
        $('.ui.modal').modal('show');       
    });    
});

我相信应该在预加载时触发“下拉菜单”。

Answer 3

查看语义文档，似乎第一个 .dropdown 将创建对象，第二个将导致切换触发（默认情况下）。如果您想使其成为切换操作，请尝试以下操作：

$(document).ready(function () {

    ...

    $('.ui.contact.selection.dropdown').dropdown();
    $('.ui.contact.selection.dropdown').on("click", function () {
        $(this).behavour("toggle");
    });
});

这个事件不仅会处理打开，还会处理关闭。

JSFiddle