在外部单击时jQuery隐藏div

Question

I am trying to style div and ul to function like . 我正在尝试将div和ul的样式设置为。 However, I have a problem that: 1) I only want to toggle the ul that I click and hide the other ul. 但是，我有一个问题：1）我只想切换单击的ul，并隐藏另一个ul。 So I wonder if jquery support some function such as 'not click'? 所以我想知道jquery是否支持某些功能，例如“ not click”？ 2) I want to hide all the ul when the mouse is click outside. 2）我想在鼠标单击外部时隐藏所有ul。 I did some research, and see other people use mouseup or click on body. 我做了一些研究，发现其他人使用mouseup或单击身体。 But I am not quiet sure how it works. 但是我不能确定它是如何工作的。

 $(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

You need to hide other ul whenever some one clicks on .select div. 每当有人单击.select div时，您需要隐藏其他ul。 Here is a working fiddle: http://jsfiddle.net/0mgbsa0b/1/ 这是一个有效的小提琴： 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

here you go: DEMO 在这里，你去：演示

$(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
        }
    });
});

you can define your notClick() function as below: 您可以如下定义notClick()函数：

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

and then use it as: 然后将其用作：

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

Answer 3

I'm interested in two concerns you raised, so i will be trying to share some ideas on them: 我对您提出的两个问题很感兴趣，因此我将尝试就这些问题分享一些想法：

1）So I wonder if jquery support some function such as 'not click'? 1）所以我想知道jquery是否支持某些功能，例如“ not click”？

personally, to quesiton1 我个人对quesiton1

i think there is no jQuery event method called .noclick() 我认为没有称为.noclick（）的jQuery事件方法
PPL often use addClass & removeClass to log whether an element got clicked and after marking the element with class="active" , using jQuery selector to select ".active" or using jQuery ":not" selector to select elements that are not marked ".active" ( indirectly finding out those unclicked.) PPL经常使用addClass和removeClass来记录是否单击了元素，并用class =“ active”标记元素后，使用jQuery选择器选择“ .active”或使用jQuery“：not”选择器来选择未标记为“”的元素.active”（间接找出未点击的内容。）
3.You might also need to count in click propagation issues. 3.您可能还需要考虑点击传播问题。 meaning sometimes you click a children container and triggered click event towards all its parent inside. 这意味着有时您单击一个子容器，并向其中的所有父容器触发click事件。
```
  fiddle link: `http://jsfiddle.net/hahatey/ctp5jngf/2/` 
```
In the above case , if you clicked child box in red, will by default alert1, alert2 if you didn't apply a e.stopPropagation() to the click event; 在上述情况下，如果您单击红色的子框，则默认情况下将为alert1，alert2（如果您未对click事件应用e.stopPropagation（））；

2) I want to hide all the ul when the mouse is click outside. 2）我想在鼠标单击外部时隐藏所有ul。 I did some research, and see other people use mouseup or click on body. 我做了一些研究，发现其他人使用mouseup或单击身体。 But I am not quiet sure how it works. 但是我不能确定它是如何工作的。

for question 2: 对于问题2：

could be many many ways to do it, you can try blur() //lose focus event trigger. 可能有很多方法，您可以尝试blur（）//丢失焦点事件触发器。
like what you mentioned mouseout, mouseup, add click event listener to outer area all will work for it as long as u can use method in answer1. 就像您提到的mouseout，mouseup，在外部区域添加click事件侦听器一样，只要您可以在answer1中使用方法，它都将起作用。 i see other ppl have posted many answers already as it can be done in many ways. 我看到其他人已经发布了许多答案，因为它可以通过多种方式完成。

在外部单击时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