jQuery脚本 - 用特定脚本切换打开/关闭？

我目前使用下面的jQuery脚本：http://davidwalsh.name/twitter-dropdown-jquery - 我有一个特定的问题。下面的jQuery脚本与Twitter的登录类似，它切换div。但是，通过此脚本，我无法切换出div（通过单击此框或分配打开文本的文本）。我附上了代码，并且我非常肯定代码的结尾处理了这个问题，我只是不确定如何改变它，以便它不会销毁脚本。我希望用户只需点击打开的链接即可完成关闭操作。如果任何人都能帮上忙，那会很棒！jQuery脚本 - 用特定脚本切换打开/关闭？

我似乎无法发布整个jQuery脚本在这里，但我包括一个链接到代码可用于查看。

来源

2011-05-19 BrianJ

那么...你的代码在哪里？ – DarthJDG 2011-05-19 13:56:16

该代码是在这里找到完全相同的代码：http://davidwalsh.name/twitter-dropdown-jquery - 我试图发布整个jQuery脚本，但它不会让我。 – BrianJ 2011-05-19 14:14:49

如果它在那里工作，它一定有一些区别，但它不适合你。 :)你可以尝试在jsfiddle.net上设置它？ – DarthJDG 2011-05-19 14:16:17

在JsFiddle中玩了一段时间后，我想出了一些代码，它可以做到你想做的事情，我试着尽可能地改变现有的代码。

$(document).ready(function() { 
    /* for keeping track of what's "open" */ 
    var activeClass = 'dropdown-active', 
     focusFired = false,     
     showingDropdown, showingMenu, showingParent; 
    /* hides the current menu */ 
    var hideMenu = function() { 
     if (showingDropdown) { 
     showingDropdown.removeClass(activeClass); 
     showingDropdown = null; 
     showingMenu.hide(); 
    } 
    }; 

    /* recurse through dropdown menus */ 
    $('.dropdown').each(function() { /* track elements: menu, parent */ 
    var dropdown = $(this); 
    var menu = dropdown.next('div.dropdown-menu'), 
     parent = dropdown.parent(); /* function that shows THIS menu */ 
    var showMenu = function() { 
     hideMenu(); 
     showingDropdown = dropdown.addClass('dropdown-active'); 
     showingMenu = menu.show(); 
     showingParent = parent; 
    }; 

    /* function to toggle menu when clicked */ 
    dropdown.bind('click', function(e) { 
     console.log('Click fired'); 
     if (e) e.stopPropagation(); 
     if (e) e.preventDefault(); 
     if(showingDropdown == dropdown && !focusFired) { 
      hideMenu(); 
     } else { 
      showMenu(); 
     } 
     focusFired = false; 
    }); 
    /* function to show menu when someone tabs to the box */ 
    dropdown.bind('focus', function() { 
     focusFired = true; 
     showMenu(); 
    }); 
    }); 

    /* hide when clicked outside */ 
    $(document.body).bind('click', function(e) { 
    if (showingParent) { 
     var parentElement = showingParent[0]; 
     if (!$.contains(parentElement, e.target) || !parentElement == e.target) { 
      hideMenu(); 
     } 
    } 
    }); 
});

有一些事情是在第一个非显而易见的，当你点击进入某个元素的焦点事件触发和点击事件触发，因为焦点显示菜单中，你不能只检查状态，因为有它会显示并快速隐藏菜单。这就是为什么我添加了隐藏之前单击事件检查的focusFired标志。

来源

2011-05-19 15:25:51 ihumanable

谢谢不人道！它像一个魅力工作！ – BrianJ 2011-05-19 16:04:28

你可以改变的代码只是一点点：

/* function to show menu when clicked */ 
dropdown.bind('click',function(e) { 
    if(e) e.stopPropagation(); 
    if(e) e.preventDefault(); 
    if(menu.is(':visible'){ 
    hideMenu(); 
    } else { 
    showMenu(); 
    } 
});

让我知道，如果它的工作原理，因为它没有经过充分测试。

编辑︰看看@ ihumanable的答案，他关心实际测试代码之前要求任何反馈。 :)

来源

2011-05-19 15:25:42 DarthJDG

感谢您的帮助DarthJDG！ – BrianJ 2011-05-19 16:04:36

jQuery脚本 - 用特定脚本切换打开/关闭？

回答

相关问题