代码之家  ›  专栏  ›  技术社区  ›  ezkay

将“单击菜单外以关闭”jQuery/Javascript添加到具有.tggle()的菜单下拉列表中

  •  2
  • ezkay  · 技术社区  · 9 年前

    如果我在菜单外单击,我想添加关闭菜单的功能。

    同时保持菜单按钮工作以关闭它: https://jsfiddle.net/ezkay/1he5bhzt/

    $(document).ready(function () {
        $("li").click(function () {
            $('li > ul').not($(this).children("ul").toggle()).hide();
        });
    });
    

    此外,你能告诉我这是否适用于手机等吗?我希望并认为是这样,因为它正在使用。点击,对吗?

    这是指这篇帖子,我无法回复在那里提问的答案: How to change drop-down menu to drop-up menu

    3 回复  |  直到 7 年前
        1
  •  3
  •   rrk Manish Jangir    9 年前

    DEMO

    以下就是诀窍。

    $(document).on('click',function (e) {
      footerUl = $('ul:first li');
      if (!footerUl.is(e.target) 
          && footerUl.has(e.target).length === 0){
        footerUl.children('ul').hide();
      }
    });
    

    $(document).ready(function () {
      $("li").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
      });
    });
    
    $(document).on('click',function (e) {
      footerUl = $('ul:first li');
      if (!footerUl.is(e.target) 
          && footerUl.has(e.target).length === 0){
        footerUl.children('ul').hide();
      }
    });
    div {
        background: #999999;
        height: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        color: #000000;
        margin: -8px;
        width:100%;
        position:fixed;
        bottom:0px;
    }
    ul, li, a {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #000000;
    }
    ul > li {
        float: right;
    }
    ul > li a {
        color: #fff;
        font-weight: bold;
        line-height: 40px;
        height:40px;
        display:block;
        padding:0px 10px;
    }
    ul li a:hover {
        background: #666666;
    }
    ul li ul {
        display: none;
        position: absolute;
        background: #333333;
        bottom:40px;
        width: 200px;
        right: 0px;
    }
    ul li ul li {
        float: none;
        line-height: 40px;
        height: 40px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <div>
        <ul>
            <li><a href="#">=</a>
    
                <ul>
                    <li><a href="#">one</a>
                    </li>
                    <li><a href="#">two</a>
                    </li>
                    <li><a href="#">three</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
        2
  •  0
  •   Golak Sarangi    9 年前

    假设你想在有人点击ul标签外时关闭。您需要捕获文档中的所有单击事件。然后检查单击是否发生在ul标记之外。如果在外面,请关闭菜单

    var myelement = $('ul')
    $(document).on('click', function(e) {
        var el = e.target();
        if(!$.contains(myelement, el)) { //checks if the click happened outside the ul tag
            //close menu
        }
    })
    
        3
  •  0
  •   rrk Manish Jangir    9 年前

    我会将单击事件附加到文档,然后检查子元素。 假设您的LI元素具有类“菜单”:

    $(document).click(function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("menu")) {
            //close menu here
        }
    });