Question

我正在尝试设置div和ul的功能。但是，我有一个问题： 1）我只想切换我点击的ul并隐藏其他ul。所以我想知道jquery是否支持某些功能，例如＆＃39;不是点击＆＃39;？ 2）我想在外面点击鼠标时隐藏所有的ul。我做了一些研究，看到其他人使用鼠标或点击身体。但我不确定它是如何运作的。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

在这里： 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
        }
    });
});

您可以按以下方式定义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是否支持某些功能，例如“不点击”？

个人，问题1

我认为没有名为.noclick（）
PPL经常使用addClass＆amp; removeClass用于记录是否单击了一个元素，并在使用class =“active”标记元素后，使用jQuery选择器选择“.active”或使用jQuery“：not”选择器选择未标记为“.active”的元素（间接发现那些未被点击的人。）

3.您可能还需要计算点击传播问题。有时你会点击一个子容器并触发所有内部父项的click事件。
```
 fiddle link: `http://jsfiddle.net/hahatey/ctp5jngf/2/`
```
在上述情况下，如果您单击红色的子框，则默认为alert1，alert2如果您没有将e.stopPropagation（）应用于click事件;

2）我想在外面点击鼠标时隐藏所有的ul。我做了一些研究，看到其他人使用鼠标或点击身体。但我不确定它是如何运作的。

问题2：

可以有很多种方法，你可以试试blur（）//失去焦点事件触发器。
就像你提到的mouseout，mouseup，将click事件监听器添加到外部区域都可以为它工作，只要你可以在answer1中使用方法。我看到其他人已经发布了许多答案，因为它可以通过多种方式完成。

点击外面时，jquery隐藏div

3 个答案: