如何实现点击div时隐藏其余所有div仅保留当前点击项？

• 实现前端交互效果：点击某个div元素时，隐藏同组其他所有div，仅保留当前被点击的div。

初始实现（运行失败） #

最初编写的jQuery代码因选择器匹配逻辑错误无法正常运行，初始代码与HTML结构如下：

$(document).ready(function() {
  $('.campingTrips').click(function(e) {
    var image = e.target,
      interval,
      height = 200,
      width = 200,
      z = $(this).css("z-index");
    $(this).css("z-index", z + 10);
    $('#product-container').addClass('disable-click');
    $('.unhidden').not($(this).parent().parent()).addClass('noOpacity');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
  <h1>Camping trips</h1>
</div>
<div id="cityBreaks">
  <h1>City breaks</h1>
</div>
<div id="roadTrips">
  <h1>Road trips</h1>
</div>
<div id="cruises">
  <h1>Cruises</h1>
</div>
<div id="groupTours">
  <h1>Group tours</h1>
</div>
<div id="girlsTrips">
  <h1>Girls’ trips</h1>
</div>

项目基于Java、Spring Boot框架开发，最初引入jQuery的方式如下：

<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/js/index.js}"></script>

第一次调整（仍报错） #

后续调整实现方案：给所有目标div添加clickable类，调整后的HTML如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1></div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1></div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1></div>
<div id="cruises" class="clickable"><h1>Cruises</h1></div>
<div id="groupTours" class="clickable"><h1>Group tours</h1></div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1></div>

对应调整后的JS逻辑如下：

$(document).ready(function () {
$('clickable').on('click', function () {
    var current = $(this).attr('id');
    $('clickable:not(#' + current + ')').hide();
})
})

代码运行时浏览器控制台抛出如下错误：

Uncaught ReferenceError: $ is not defined
at index.js:119:1

修复$ is not defined报错 #

该报错的核心原因是jQuery未成功加载，或加载顺序错误：

• 检查script标签引入顺序：必须先引入jQuery，再引入依赖jQuery的自定义index.js脚本，顺序颠倒就会出现$未定义的问题
• 检查webjars引入配置：Spring Boot项目需要先在pom.xml/gradle中引入对应版本的jQuery webjars依赖，同时确认thymeleaf模板中写的webjars路径和jar包内资源路径匹配，避免404导致jQuery加载失败
• 加载完成验证：可以在浏览器开发者工具的Network面板查看jQuery资源的加载状态，确认状态码为200；也可以在控制台输入window.jQuery，如果返回undefined说明jQuery确实未加载成功。

修复JS选择器语法错误 #

调整后的JS代码存在选择器语法错误：jQuery中类选择器必须加.前缀，$('clickable')是标签选择器，只会匹配<clickable>自定义标签，无法匹配到加了clickable类的div元素。
修正后的完整可运行JS代码如下：

$(document).ready(function () {
  // 类选择器前面必须加.
  $('.clickable').on('click', function () {
    // 先隐藏所有同组div，再显示当前点击的div，逻辑更简洁
    $('.clickable').hide();
    $(this).show();
  })
})

内容的提问来源于stack exchange，提问作者devnoob