$(".activity-title").mouseenter(function(){ if($(this).index()/2 == activity){ return; }else{ $(this).children().eq(1).show(); } }) $(".activity-title").mouseleave(function(){ if($(this).index()/2 == activity){ return; }else{ $(this).children().eq(1).hide(); } }) $(".activity-title").click(function(){ if($(this).index()/2 == activity){ return; }else{ activity = $(this).index()/2; console.log(activity); for(let i=0;i<3;i++){ if(i == activity){ $(".activity-title").eq(i).children().eq(1).show(); $(".activity-content").eq(i).css("width","555px"); }else{ $(".activity-title").eq(i).children().eq(1).hide(); $(".activity-content").eq(i).css("width","0"); } } } })解释代码

这段代码使用了jQuery库来实现交互效果。它主要是针对一个页面上的活动列表，当鼠标移入活动标题时，如果该活动不是当前选中的活动，则会显示该活动的详情信息；当鼠标移出时则隐藏详情信息。当用户点击某个活动时，会将该活动设置为当前选中的活动，并展示该活动的详情信息，同时隐藏其他活动的详情信息。具体解释见下：

首先，使用jQuery的选择器选中了所有活动标题元素，然后为它们分别绑定了mouseenter、mouseleave、click事件。

当鼠标移入某个活动标题时，会执行mouseenter事件处理函数。在函数中，通过$(this)获取当前鼠标所在的活动标题元素，然后使用index()方法获取该元素在父元素（即活动列表）中的下标，因为每个活动标题元素都包含了一个子元素（可能是a、span等），所以需要除以2才能得到对应的活动下标。如果该活动下标等于当前选中的活动下标，则什么都不做；否则，将该活动标题元素的子元素中下标为1的元素（即详情信息）显示出来。

当鼠标移出某个活动标题时，会执行mouseleave事件处理函数。在函数中，同样也会获取当前鼠标所在的活动标题元素的下标，然后判断是否等于当前选中的活动下标，如果不等于，则将该活动标题元素的子元素中下标为1的元素（即详情信息）隐藏起来。

当用户点击某个活动标题时，会执行click事件处理函数。在函数中，同样也会获取当前鼠标所在的活动标题元素的下标，并将该下标除以2得到对应的活动下标。如果该活动下标等于当前选中的活动下标，则什么都不做；否则，将该活动下标设置为当前选中的活动下标，并遍历所有活动标题元素和对应的活动详情元素，如果该元素对应的活动下标等于当前选中的活动下标，则显示该元素的详情信息，否则隐藏该元素的详情信息。