隐藏内容和Jquery 2点击火

时间:2014-08-29 17:35:58

标签: javascript jquery semantic-ui

我知道有几个相关的问题,但我想更清楚地问这个问题。我花时间在jsfiddle上复制了我的问题(链接在底部)。

我有一个jquery事件:

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

}); 

下拉菜单位于模态内部,在点击THAT div之前实际不存在

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

问题在于,当我加载模态,然后单击下拉菜单时,菜单会在触发之前单击两次。我猜这是因为页面加载时下拉列表不可用。第一次点击加载它,第二次点击发射它?我不确定但是会感谢您的帮助!

请参阅jsfiddle

3 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:0)

我尝试了下面的代码并且有效!

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

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

我认为应该在预加载时触发“下拉列表”。

答案 2 :(得分:0)

查看documentation的语义,似乎第一个.dropdown将创建对象,第二个将导致切换触发(默认情况下)。如果要进行切换操作,请尝试以下操作:

$(document).ready(function () {

    ...

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

此事件不仅会处理打开,还会关闭。

JSFiddle