Question

我尝试实现的功能允许用户在第二次点击时导航到下拉列表项在移动设备上的锚点的href。但是，如果列表项目当前具有＆＃34; open＆＃34; class，指定当前单击链接一次。我尝试过以下方法：

$('.dropdown').on('hide.bs.dropdown', function () {
    if ($(this).hasClass('open')) {
        window.location = $(this).find('a.dropdown-toggle.visible-sm').href();
    }
});

和

$('.dropdown.open').on('hide.bs.dropdown', function () {
    window.location = $(this).find('a.dropdown-toggle.visible-sm').href();
});

但两者都会导致用户在不展开下拉列表的情况下导航到任何其他下拉链接的href。在进一步研究之后，我发现一些文章说，当动态添加一个类时，你需要使用事件委托才能引用动态添加的类。我试过这个：

$(document).on('click', 'li.open', function(){
    window.location = $(this).find('a.dropdown-toggle.visible-sm').href();
});

但它与我之前尝试的相同。

Answer 1

Tony的解决方案并不适合我，因为如果没有额外的JavaScript功能就无法关闭下拉列表。

如果下拉列表已经打开，我打开页面。

$('.dropdown a.dropdown-toggle').on('click', function() {
    if($(this).parent().hasClass('open'))
        location.assign($(this).attr('href'));
});

Answer 2

我能够解决这个问题，以防任何人需要这样做：

$('.dropdown').on('show.bs.dropdown', function () {
    $(this).siblings('.open').removeClass('open').find('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    $(this).find('a.dropdown-toggle').removeAttr('data-toggle');
});

Answer 3

正在使用Pendrokar's answer我用这个来涵盖所有下拉菜单，因为打开了＆＃39;并不总是被指定为类，并允许链接指定目标。

$('a[data-toggle="dropdown"]:not([href=""])').off('click.namespace').on('click.namespace',
   function(e) {
       if ($(this).parent().is('.show, .open')) 
           window.open($(this).attr(
                'href'), $(this).attr('target') || '_self');
   });

在Bootstrap 3中第二次单击时导航到下拉父级链接

3 个答案: