當用戶點擊另一個div的時候，jQuery隱藏div

我知道這個問題被問了很多次，但是我的問題有點不同。當用戶點擊另一個div的時候，jQuery隱藏div

對於那些有同樣的問題，這裏是解決https://jsfiddle.net/8oqvoffc/4/ thanxs到MarcelD

所以，如果我點擊它隱藏的第二個div主要DIV之外。但是，如果我在某些元素的主div內單擊，它不應該隱藏。像其他孩子DIV或P一樣。只有在其邊界之外點擊時才應該發揮作用。我應該改變什麼？

$(document).click(function(e) { 
 
    if (e.target.id != 'slide-out') { 
 
    $('.totals').hide(); 
 
    } 
 
});

.div1 { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: #ccc; 
 
} 
 

 
.totals { 
 
    border-top: 1px solid #ddd !important; 
 
    position: fixed !important; 
 
    bottom: 0px !important; 
 
    background: #000 !important; 
 
    right: 0px !important; 
 
    width: 300px !important; 
 
    height: 190px !important; 
 
    padding-top: 20px !important; 
 
    z-index: 9999999999999999999999999 !important; 
 
    display: ; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide-out" class="div1"> 
 
    <div class="div1_one"> 
 
    sada 
 
    </div> 
 
    <p> 
 
    hello world! 
 
    </p> 
 
</div> 
 

 
<div class="totals"> 
 

 
</div>

來源

2017-05-04 AndrewS

你在文檔上有一個點擊偵聽器...爲什麼不把點擊偵聽器添加到應該可以點擊的元素呢？ –

這是你要找的嗎？ https://jsfiddle.net/g959Lkq9/ –

不是。它也是這樣。如果你點擊讓我們說你好！它也會隱藏.totals div。但它不應該。如何避免這種情況？ – AndrewS

你必須檢查父（S）像@Carsten指出.. 但他的解決方案是隻爲一個級別......

這裏更新的提琴+不要緊，你的元素有多深 - >只要他們有父母＃滑出它不會隱藏你的。總數

$(document).click(function(e) { 
 
if(e.target.id != 'slide-out' && $(e.target).parents('#slide-out').length === 0) { 
 
     $('.totals').hide(); 
 
    } 
 
});

.div1 { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: #ccc; 
 
} 
 

 
.totals { 
 
    border-top: 1px solid #ddd !important; 
 
    position:fixed !important; 
 
    bottom: 0px !important; 
 
    background: #000 !important; 
 
    right: 0px !important; 
 
    width: 300px !important; 
 
    height: 190px !important; 
 
    padding-top: 20px !important; 
 
    z-index: 9999999999999999999999999 !important; 
 
    display: ; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id ="slide-out" class="div1"> 
 
    <div class="div1_one"> 
 
    sada 
 
    </div> 
 
    <p> 
 
    hello world! 
 
    </p> 
 
</div> 
 

 
<div class="totals"> 
 

 
</div>

Cheerio :)

來源

2017-05-04 12:51:29 MarcelD

它根本不工作。 –

你試過 - >運行代碼片段？ - >它的工作像預期的那樣 - >只要你點擊裏面的東西，滑出什麼都不會發生......所以安德魯需要它的方式：「......如果我點擊某個主div的內部，它不應該隱藏元素...「 – MarcelD

是的，我已經嘗試過。你的理解是錯誤的 –

可以使用stopPropagation()函數從通過子元素髮射到父

$(document).click(function(e) { 
 
    if (e.target.id != 'slide-out') { 
 
    $('.totals').hide(); 
 
    } 
 
}); 
 

 
$('.totals').click(function(e) { 
 
    e.stopPropagation(); 
 
})

.div1 { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: #ccc; 
 
} 
 

 
.totals { 
 
    border-top: 1px solid #ddd !important; 
 
    position: fixed !important; 
 
    bottom: 0px !important; 
 
    background: #000 !important; 
 
    right: 0px !important; 
 
    width: 300px !important; 
 
    height: 190px !important; 
 
    padding-top: 20px !important; 
 
    z-index: 9999999999999999999999999 !important; 
 
    display: ; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide-out" class="div1"> 
 
    <div class="div1_one"> 
 
    sada 
 
    </div> 
 
    <p> 
 
    hello world! 
 
    </p> 
 
</div> 
 

 
<div class="totals"> 
 
</div>

來源

2017-05-04 12:53:55

如果點擊應該工作的空白灰色部分不起作用 –

爲什麼我不能看到你的答案呢？ @RanaGhosh如果你知道閱讀代碼，你會知道只有在黑色部分點擊才能停止閱讀。 –

我已經給出了答案。請檢查。 ;）你的已經是對的。那一次不工作，因爲我在jsfiddle中嘗試了這一點。請編輯你的答案。我將刪除我的Downvote。感謝名單。 –

我知道這阻止點擊事件已經解決了，但最快和最好的解決方案是在下面。我認爲應該使用這個代碼。不要你接受這個答案，只是想幫助你。

$(document).ready(function (e) { 
    $('body').not('.totals').click(function(e) { 
     $('.totals').hide(); 
    }) 
});

來源

2017-05-04 13:16:54

當用戶點擊另一個div的時候，jQuery隱藏div

回答

相關問題