当我单击某个元素外部或页面上其他位置时隐藏该元素

发布于 2024-10-11 05:02:38 字数 576 浏览 3 评论 0原文

好的，我在 DIV 中有一个单选按钮列表，当我单击跨度时，该 DIV 会向下滑动。

现在，当我选择其中一个单选按钮时，跨度中的文本将被替换，并且 DIV 会向后滑动。

我还需要让带有单选按钮列表的 DIV 在用户单击它之外的某个位置/页面上的任何其他位置时向后滑动。

这是我的 jQuery：

$('input[type=radio]').click(function() {       
    $('.selected-search-wjs').text($(this).parent().text());//This replaces the text/selection
    $('.radio-btns-wrapper-wjs').slideUp('fast');//This makes the DIV slide back up after a selection has been made
});

知道怎么做吗？

提前致谢。

附言。如果您需要 HTML，请告诉我。我没有把它放在这里，因为我认为没有必要，因为无论 HTML 如何组合在一起，这都是一个行为功能。谢谢。

原文

Ok, I have a list of radio buttons inside a DIV, this DIV slides down when I click on span.

Now, when I select one of the radio buttons, the text in the span is replaced and the DIV slides back up.

I also need to make the DIV with the list of radio buttons slide back up whenever the user clicks somewhere outside of it/any other place on the page.

Here's my jQuery:

$('input[type=radio]').click(function() {       
    $('.selected-search-wjs').text($(this).parent().text());//This replaces the text/selection
    $('.radio-btns-wrapper-wjs').slideUp('fast');//This makes the DIV slide back up after a selection has been made
});

Any idea how to that?

Thanks in advance.

PS. Let me know if you need the HTML. I didn't put it here because I don't think is necessary since this is a behavior feature regardless of how the HTML is put together. Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一笑百媚生 2024-10-18 05:02:38

试试这个：

var wrapper = $('.radio-btns-wrapper-wjs'); // cache the wrapper element for speed
$(document).click(function(e) { // when any click is received
    if (
        (wrapper[0] != e.target) && // the target element is not the wrapper
        (!wrapper.has(e.target).length) // and the wrapper does not contain the target element
    ) {
        wrapper.slideUp('fast');
    }
});

Try this:

var wrapper = $('.radio-btns-wrapper-wjs'); // cache the wrapper element for speed
$(document).click(function(e) { // when any click is received
    if (
        (wrapper[0] != e.target) && // the target element is not the wrapper
        (!wrapper.has(e.target).length) // and the wrapper does not contain the target element
    ) {
        wrapper.slideUp('fast');
    }
});

回复收藏 0 原文

那支青花 2024-10-18 05:02:38

尝试 jQuery 的 :not 选择器，如下所示

$('body:not(.radio-btns-wrapper-wjs, input[type=radio])').click(function() {
    $('.radio-btns-wrapper-wjs').slideUp('fast');
});

Try jQuery's :not selecter, as in

$('body:not(.radio-btns-wrapper-wjs, input[type=radio])').click(function() {
    $('.radio-btns-wrapper-wjs').slideUp('fast');
});

回复收藏 0 原文

找回味觉 2024-10-18 05:02:38

这是这个问题的解决方案。

我需要做的就是使用 .mouseleave 方法创建另一个函数：

$('.radio-btns-wrapper-wjs').mouseleave(function() {
  $(this).slideUp();
});

现在，我使用 .mouseout但它不起作用，因为容器 DIV 中有子元素，所以一旦您将鼠标悬停在它们上方，DIV 就会滑回来。

所以我找到了这个关于为什么以及如何解决它的简单解释：

http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html

谢谢。

编辑--

我遇到了与此案例有关的其他问题，请在此处查看问题和解决方案：如果显示则隐藏元素（有点复杂的情况）

Here's the solution for this.

All I needed to do was to create another function using the .mouseleave method:

$('.radio-btns-wrapper-wjs').mouseleave(function() {
  $(this).slideUp();
});

Now, I was using .mouseout but it didn't work because the container DIV had child elements in it, so once you hover over them the DIV would slide back up.

So I found this simple explanation about why and how to solve it:

http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html

Thanks.

EDIT--

I ran into other issues with this case, see the problem and solution here: Hide element if displayed (a little complex case)

回复收藏 0 原文

~没有更多了~