保持元素打开,在其他任何地方单击时关闭

时间:2022-12-01 14:20:07

When the link (.account) is pressed the dropdown appears. However I'm having trouble figuring out how to get the dropdown to stay down when active and close only when pressed anywhere outside the dropdown

按下链接(.account)时,将显示下拉列表。但是我无法弄清楚如何让活动时下拉停留下来,只有在下拉菜单外的任何地方按下时关闭

        $(".account").click(function(e){

            e.stopPropagation();

            var oBody = $("body")
                oButton = $(".account")

            if (oBody.hasClass("open-says-me") & oButton.hasClass("active")) 
            {
                oBody.removeClass("open-says-me");
                oButton.removeClass("active");

                jQuery(document).off("touchstart click");

            } else {

                oBody.addClass("open-says-me");
                oButton.addClass("active");


                jQuery('html').on("touchstart click", function() {
                        oBody.removeClass("open-says-me");
                        oButton.removeClass("active");
                    });
            }

        });

How do I get it to stay open and close only when user clicks/touches anywhere outside the dropdown.
With my actual code, when I click on Button with .account -> Panel Opens -> Click anywhere on document it closes.
However it even closes if you click/touch the panel itself, which isn't what I want, i'm trying to get it so when you click anywhere BUT the dropdown it closes. Thanks for help.

如何仅在用户点击/触摸下拉菜单外的任何位置时才能保持打开和关闭状态。使用我的实际代码,当我点击按钮时带有.account - > Panel Opens - >单击文档上的任意位置即可关闭。然而,如果你点击/触摸面板本身甚至关闭,这不是我想要的,我试图得到它所以当你点击任何地方但它关闭的下拉菜单。感谢帮助。

1 个解决方案

#1


Seeing this post : jQuery: Stop dropdown menu from collapsing when clicking on its children
if you have a DOM like this :

看到这篇文章:jQuery:如果你有一个这样的DOM,点击它的孩子时停止下拉菜单就会崩溃:

<ul class="dropdown">
 <li><a href="#" class="noclick nojs">Select your Topic</a>
  <ul class="nojs" >
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
 </li>
</ul>

you must add this code :

你必须添加这个代码:

$('ul.nojs *').click(function(e){
   e.stopPropagation(); 
});​

looks like the .account you use is like the .dropdown of the other post. Have a try with this, and post your DOM in your question if you can't make it work.

看起来你使用的.account就像是另一篇文章的.dropdown。尝试使用此功能,如果无法使用,请在您的问题中发布DOM。

#1


Seeing this post : jQuery: Stop dropdown menu from collapsing when clicking on its children
if you have a DOM like this :

看到这篇文章:jQuery:如果你有一个这样的DOM,点击它的孩子时停止下拉菜单就会崩溃:

<ul class="dropdown">
 <li><a href="#" class="noclick nojs">Select your Topic</a>
  <ul class="nojs" >
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
 </li>
</ul>

you must add this code :

你必须添加这个代码:

$('ul.nojs *').click(function(e){
   e.stopPropagation(); 
});​

looks like the .account you use is like the .dropdown of the other post. Have a try with this, and post your DOM in your question if you can't make it work.

看起来你使用的.account就像是另一篇文章的.dropdown。尝试使用此功能,如果无法使用,请在您的问题中发布DOM。