在外部單擊時jQuery隱藏div

Question

我正在嘗試將div和ul的樣式設置為。 但是，我有一個問題：1）我只想切換單擊的ul，並隱藏另一個ul。 所以我想知道jquery是否支持某些功能，例如“ not click”？ 2）我想在鼠標單擊外部時隱藏所有ul。 我做了一些研究，發現其他人使用mouseup或單擊身體。 但是我不能確定它是如何工作的。

 $(document).ready(function() { $('.hide').each(function() { $(this).hide(); }); $('.select').click(function() { var id = '#' + $(this).attr('id'); var sub = id + '_sub'; $(sub).slideToggle(); }); $('body').mouseup(function() { if($(this).length == 0) { $(this).hide(); } }); });

 div.select { display: inline-block; margin: 10px; padding: 20px; background: red; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="1" class="select"> <div class="main"> <span>1</span> </div> <div> <ul id="1_sub" class="hide"> <li>1</li> <li>2</li> </ul> </div> </div> <div id="2" class="select"> <div class="main"> <span>1</span> </div> <div> <ul id="2_sub" class="hide"> <li>1</li> <li>2</li> </ul> </div> </div> <div id="3" class="select"> <div class="main"> <span>1</span> </div> <div> <ul id="3_sub" class="hide"> <li>1</li> <li>2</li> </ul> </div> </div> </body>

Answer 1

每當有人單擊.select div時，您需要隱藏其他ul。 這是一個有效的小提琴： http : //jsfiddle.net/0mgbsa0b/1/

$(document).ready(function() {
$('.hide').each(function() {
  $(this).hide();  
});

$('.select').click(function() {
    $('.hide').each(function() {
  $(this).hide();  
});
    var id = '#' + $(this).attr('id');
    var sub = id + '_sub';
    $(sub).slideToggle();
});

$('body').mouseup(function() {
   if($(this).length == 0) {
     $(this).hide();  
   }
});

}）;

Answer 2

在這里，你去：演示

$(document).ready(function() {
    $('.hide').hide(); //hide in the beginning

    $('.select').click(function() {
        $('.hide').slideUp(200); //hide all the divs
        $(this).find('.hide').slideDown(200); //show the one that is clicked
    });
    $(document).click(function(e){
        if(!$('.select').is(e.target) || !$('.select').has(e.target)){ // check if the click is inside a div or outside
            $('.hide').slideUp(200); // if it is outside then hide all of them
        }
    });
});

您可以如下定義notClick()函數：

$.fn.notClicked= function(clickPosition){
    if (!$(this).is(clickPosition.target)   && $(this).has(clickPosition.target).length === 0){
        return true;
        }
    else{
        return false;
        }
    };

然后將其用作：

$(document).click(function(e){
    alert($('.select').notClick(e)); // will return true if it is not clicked, and false if clicked
});

Answer 3

我對您提出的兩個問題很感興趣，因此我將嘗試就這些問題分享一些想法：

1）所以我想知道jquery是否支持某些功能，例如“ not click”？

我個人對quesiton1

我認為沒有稱為.noclick（）的jQuery事件方法
PPL經常使用addClass和removeClass來記錄是否單擊了元素，並用class =“ active”標記元素后，使用jQuery選擇器選擇“ .active”或使用jQuery“：not”選擇器來選擇未標記為“”的元素.active”（間接找出未點擊的內容。）
3.您可能還需要考慮點擊傳播問題。 這意味着有時您單擊一個子容器，並向其中的所有父容器觸發click事件。
```
  fiddle link: `http://jsfiddle.net/hahatey/ctp5jngf/2/` 
```
在上述情況下，如果您單擊紅色的子框，則默認情況下將為alert1，alert2（如果您未對click事件應用e.stopPropagation（））；

2）我想在鼠標單擊外部時隱藏所有ul。 我做了一些研究，發現其他人使用mouseup或單擊身體。 但是我不能確定它是如何工作的。

對於問題2：

可能有很多方法，您可以嘗試blur（）//丟失焦點事件觸發器。
就像您提到的mouseout，mouseup，在外部區域添加click事件偵聽器一樣，只要您可以在answer1中使用方法，它都將起作用。 我看到其他人已經發布了許多答案，因為它可以通過多種方式完成。

在外部單擊時jQuery隱藏div

問題描述

3 個解決方案

解決方案1
2 2014-11-09 06:12:04

解決方案2
2 已采納 2014-11-09 06:29:27

解決方案3
1 2014-11-09 06:26:37

在外部單擊時jQuery隱藏div

問題描述

3 個解決方案

解決方案1 2 2014-11-09 06:12:04

解決方案2 2 已采納 2014-11-09 06:29:27

解決方案3 1 2014-11-09 06:26:37

解決方案1
2 2014-11-09 06:12:04

解決方案2
2 已采納 2014-11-09 06:29:27

解決方案3
1 2014-11-09 06:26:37