外點擊隱藏元素

當我點擊「菜單」，「.submenu」切換，我需要當我點擊之外，那麼「.submenu」應該隱藏。我已經在每個div中像使用行一樣使用它，就像我們在應用程序中使用它放置在右側以進行編輯刪除一樣。在此先感謝。外點擊隱藏元素

HTML：

<div class="edit-goal-wrapper"> 
         <div class="dropdown"> 
          <a class="account" >Menu</a> 
          <div class="submenu"> 
           <ul class="root"> 
            <li ><a href="#" >Edit Target Date</a></li> 
            <li ><a href="#" >Remove Goal</a></li> 
           </ul> 
          </div> 
         </div> 
        </div>

CSS：

.edit-goal-wrapper .dropdown 
{ 
    color: #555; 
    margin: 0; 

    right: 30px; 
    text-align: left; 
} 
.edit-goal-wrapper .submenu 
{ 
    background: #fff none repeat scroll 0 0; 
    border-radius: 6px; 
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); 
    position: absolute; 
    right: 5px; 
    top: 0px; 
    z-index: 100; 
    width:150px; 
    display:none; 
} 
.edit-goal-wrapper .dropdown li a 
{ 
color: #555555; 
display: block; 
font-family: arial; 
font-weight: normal; 
padding: 6px 15px; 
cursor: pointer; 
text-decoration:none; 
} 

.edit-goal-wrapper .dropdown li a:hover 
{ 
background:#155FB0; 
color: #FFFFFF; 
text-decoration: none; 
} 
.edit-goal-wrapper a.account 
{ 
    background: rgba(0, 0, 0, 0) url("icons/arrow.png") no-repeat scroll 116px 17px; 
    color: #555; 
    cursor: pointer; 
    display: block; 
    font-size: 30px; 
    /*height: 28px;*/ 

    text-decoration: none; 
    z-index: 110; 

} 
.edit-goal-wrapper .root 
{ 
border-top: 1px solid #dedede; 
    font-size: 12px; font-weight:normal; 
    list-style: outside none none; 
    margin: 0; 
    padding: 4px 0 2px; 
}

的jQuery：

$(".edit-goal-wrapper a").click(function(){ 

        $(this).next().toggle(); 

       });

來源

2016-03-18 Appy

還可以看到這個https://www.script-tutorials.com/click-action-css3-dropdown-menu -with-jquery/ –

如果你要隱藏的子菜單，當你點擊它的外嘗試：

$("body").click(function(e){ 
     if($('.submenu').find(e.target).length == 0 && $(e.target).is(":not('.account')")) { 
      $('.submenu').hide(); 
     } 
});

的jsfiddle：https://jsfiddle.net/z134L2ab/2/

或

$("body").click(function(e){ 
     if ($(e.target).is('.account')) { 
      $('.submenu').toggle(); 
     } else if($('.submenu').find(e.target).length == 0) { 
      $('.submenu').hide(); 
     } 
});

的jsfiddle：https://jsfiddle.net/z134L2ab/3/

來源

2016-03-18 07:01:23 madalinivascu

你能否在jsfiddle中解釋一下。 – Appy

確定，當您點擊，如果頁面元素在submeniu發現我們測試的頁面上，如果點擊的元素並沒有在submeniu發現我們隱藏submeniu – madalinivascu

https://jsfiddle.net/z134L2ab/2/ – madalinivascu

外點擊隱藏元素

回答

相關問題