Question

如果没有点击任何这些div，我想要隐藏所有div与id类似的index[0]。在我的代码中，它仅适用于第一个div，因为我使用$(window).click(function(e) { if (e.target.id != $('[id^=div_]')[0].id) { $('[id^=div_]').hide(); } });来获取id。我想将它概括为适用于所有id。

以下是代码：

＆＃13;

div {
  height: 150px;
  width: 150px;
  display: inline-block;
  background: green;
  margin: 10px;
  color: #fff;
  text-align: center;
  line-height: 150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>

＆＃13;

[gallery_list tag_ID="50" cat="XX"]

＆＃13;

FIDDLE

Answer 1

这里的简单解决方案是在所有元素上使用公共类。然后，您可以使用is()来确定e.target是否是其中一个元素，并根据需要隐藏/显示它们。试试这个：

$(window).click(function(e) {
  if (!$(e.target).is('.div')) {
    $('.div').hide();
  }
});

div {
  height: 150px;
  width: 150px;
  display: inline-block;
  background: green;
  margin: 10px;
  color: #fff;
  text-align: center;
  line-height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>

我不能像添加类一样对HTML进行任何更改

在这种情况下，您可以检查点击元素的id，看它是否以div_开头。如果没有，那么隐藏所有的div，如下所示：

$(window).click(function(e) {
  if (e.target.id.indexOf('div_') != 0) {
    $('[id^=div_]').hide();
  }
});

div {
  height: 150px;
  width: 150px;
  display: inline-block;
  background: green;
  margin: 10px;
  color: #fff;
  text-align: center;
  line-height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>

Answer 2

嘿，你可以使用这个功能

<ul>
  <li><a href="/"><span>Home</span></a></li>
  <li class="parent" transform="100"><a href="/" class="js-open-child-menu"><span>Our Services</span> <span class="angle">/</span> <i class="fa fa-angle-right"></i></a>
    <div class="child-menu">
      <ul>
        <li class="parent" transform="200">
          <a href="/" class="js-open-child-menu">01 <span>Business &amp; Commercial Law</span> <span class="angle">/</span> <i class="fa fa-angle-right"></i></a>
          <div class="child-menu">
            <ul>
              <li class="a-link-146"><a href="/"><span>Banking &amp; Finance</span></a></li>
              <li class="a-link-147"><a href="/"><span>Buying or Selling a Business</span></a></li>
              <li class="a-link-148"><a href="/"><span>Commercial Contracts &amp; Agreements</span></a></li>
              <li class="a-link-149"><a href="/"><span>Liquor Licensing</span></a></li>
            </ul>
          </div>
        </li>
        <li class="parent" transform="200">
          <a href="/" class="js-open-child-menu">02 <span>Debt Recovery &amp; Insolvency</span> <span class="angle">/</span> <i class="fa fa-angle-right"></i></a>
          <div class="child-menu">
            <ul class="m-main-menu-child">
              <li class="a-link-150"><a href="/"><span>Debt Recovery</span></a></li>
              <li class="a-link-151"><a href="/"><span>Insolvency</span></a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="a-link-129"><a href="/"><span>Careers</span></a></li>
  <li class="a-link-130"><a href="/"><span>Contact</span></a></li>
</ul>

$('.menu-content ul li.parent').each(function(){ // find each parent item
    $(this).find('.child-menu ul li a').prepend('*count*'); // for each child prepend the count
});

if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){ $('[id^=div_]').hide(); }功能会过滤filter div以div开头的id列表中所选的div

$(window).click(function(e) {
  if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
     $('[id^=div_]').hide();
  }

});

div {
  height: 150px;
  width: 150px;
  display: inline-block;
  background: green;
  margin: 10px;
  color: #fff;
  text-align: center;
  line-height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>

当在外面点击时，JQuery会隐藏多个类似id的div

2 个答案: