首页 \ 问答 \ 在外部单击时关闭Jquery列表菜单(Closing a Jquery list menu when clicked outside)

在外部单击时关闭Jquery列表菜单(Closing a Jquery list menu when clicked outside)

 我在Codrops找到了一个很棒的jquery插件，用于设置下拉列表的样式。 插件工作，看起来很棒。 我能够在没有任何重大问题的情况下实施它。  
 我只有一个问题，当我点击菜单外面时，我找不到关闭菜单的方法。 换句话说，我想在页面中的任何其他位置关闭菜单选项（不仅仅是当我点击菜单本身时）。 我在这里找到了类似的主题，但我无法将其应用到我的需求中。 我真的很感激我能得到的任何帮助。  
 该插件的链接： http ： //tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/ 

I have found a great jquery plugin at Codrops, for styling a drop down list. The plugin works and looks great. I was able to implement it without any major issues.  
I only have one problem, I can't find a way to close the menu when I click outside the menu. In other words, I want the menu options to close when I anywhere else in the page (not only when I click on the menu itself). I found similar subjects here, but I was not able to apply it to my needs. I would really appreciate any help I can get. 
The link to the plugin: http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/ 

原文：https://stackoverflow.com/questions/16096024

更新时间：2023-07-19 09:07

最满意答案

 如果您只想隐藏整个标题，直到用户将鼠标悬停在图上，请使用：  
.annotated figcaption {
    display: none;
}

.annotated:hover figcaption {
    display: block;
}
 
 如果您希望始终显示标题，并且仅在悬停时显示其他链接，请使用：  
.annotated figcaption a {
    display: none;
}

.annotated figcaption a:first-child {
    display: inline;
}

.annotated:hover figcaption a {
    display: inline;
}

If you just want to hide the entire caption until the user hovers over the figure, use: 
.annotated figcaption {
    display: none;
}

.annotated:hover figcaption {
    display: block;
}
 
If you want the title to always be displayed, and the other links to display only on hover, use: 
.annotated figcaption a {
    display: none;
}

.annotated figcaption a:first-child {
    display: inline;
}

.annotated:hover figcaption a {
    display: inline;
}

在外部单击时关闭Jquery列表菜单(Closing a Jquery list menu when clicked outside)

最满意答案

相关问答

CSS：在悬停显示和隐藏不同的div在同一时间？(CSS: On hover show and hide different div's at the same time? [duplicate])[2022-06-05]

用CSS隐藏1行文字(Hide 1 line of text with CSS)[2023-08-10]

如何使用CSS（span，onhover，selectors）隐藏和显示悬停元素？(How to hide and show elements on hover using CSS (span, onhover, selectors)?)[2021-08-20]

如何在悬停时隐藏和显示第二行文本？(How can I get the second line of text to hide and show on hover? CSS only)[2022-06-27]

在悬停时显示/隐藏div的背景图像(Show / Hide background image of div on hover)[2023-08-04]

在子元素的悬停上隐藏/显示正文中的文本(Hide/show text in body on hover of child element)[2021-09-19]

CSS悬停显示单独的隐藏元素(css hover show separate hidden element)[2022-01-16]

jQuery悬停动画不会隐藏文本(jQuery hover animation will not hide text)[2022-07-06]

在悬停时显示，用jQuery隐藏点击(Show on hover, hide on click with jQuery)[2023-07-25]

在悬停时隐藏文字并显示图像(Hide text on hover and show an image)[2021-11-30]

相关文章

最新问答