Javascript JS/jQuery-If语句不带；return"；

*此问题已更新

我有一组框，当单击打开一个名为

#expander

的div时，这些框就会打开。在我的代码中，打开

#expander

后，如果单击了另一个框，我会检查单击的新框是否与上次单击的框相同。如果是相同的，我将关闭

#expander

，否则我将短暂关闭它，然后再次打开它

这一点可以用下面的例子来说明

以下是stackoverflow中的相同代码：

$（文档）.on（'click'，'box'，函数（e）{
if（！$（“#扩展器”）.hasClass（'active'））{
$（“#扩展器”）.addClass（“活动”）；
$（'.basic info'）.css（'border-left'，'1px纯黑色'）；
activeBox=$（this.attr（'id'）；
$（'#main'）。文本（activeBox）；
log（'activeBox='+activeBox）；
返回；
}
if（$（'#expander'）.hasClass（'active'））{
$（“#扩展器”）.removeClass（'active'）；
$（'.basic info'）.css（'border-left'，'0px纯黑色'）；
if（$（this.attr（'id'）！==activeBox）{
setTimeout（函数（）{
$（“#扩展器”）.addClass（“活动”）；
}, 256);
}
activeBox=$（this.attr（'id'）；
$（'#main'）。文本（activeBox）；
log（'activeBox='+activeBox）；
返回；
}
});
#扩展器{
身高：100%；
宽度：0%；
浮动：左；
可见性：隐藏；
溢出：隐藏；
背景颜色：灰色；
过渡：.75秒放松；
}
#扩展器激活{
身高：100%；
宽度：50%；
z指数：1；
能见度：可见；
}
#近距离{
填充：4px；
边际：0px；
背景色：#707070；
颜色：白色；
字号：1.5em；
文本对齐：居中；
光标：指针；
}
#接近：悬停{
背景色：#606060；
字号：2em；
填充：0px；
}
.盒子{
宽度：32px；
高度：32px；
填充：5px0px；
利润率：0px 4px；
显示：内联块；
背景颜色：灰色；
溢出：隐藏；
字号：1em；
字体大小：粗体；
文本对齐：居中；
边框：1px实心透明；
边界半径：2px；
光标：指针；
}
.基本信息{
填充：8px 16px；
颜色：白色；
背景色：#47a；
边框顶部：1件纯黑；
右边框：1px纯黑；
边框底部：1px纯黑；
过渡期：放松；
光标：指针；
}

&时代
1.
2.
3.
对于清理部分和消除重复数据，您可以将js代码转换为

已更新


//以#扩展器为目标
变量扩展器=$（“#扩展器”），
activeBox=''；
$（文档）.on（'click'，'.box'，函数（e）{
//toggleClass表示如果#expander hasClass，则删除它，如果
//没有该类，请添加它。
Expander.toggleClass（'active'）；
//与.basic info相同，我们使用toggle类，而不是
//CSS硬编码，因此我们可以切换
$（'.basic info'）.toggleClass（'black-border-left'）；
if（$（this.attr（'id'）！==activeBox）{
Expander.removeClass（'active'）；
//为了消除第一次单击一个.box div时的延迟
//当activeBox=''时。
如果（活动框！=''）{
setTimeout（函数（）{
Expander.addClass（'active'）；
}, 500);
}否则{
Expander.addClass（'active'）；
}
activeBox=$（this.attr（'id'）；
}
$（'#main'）。文本（activeBox）；
log（'activeBox='+activeBox）；
});
对于清理部分和消除重复数据，您可以将js代码转换为

已更新


//以#扩展器为目标
变量扩展器=$（“#扩展器”），
activeBox=''；
$（文档）.on（'click'，'.box'，函数（e）{
//toggleClass表示如果#expander hasClass，则删除它，如果
//没有该类，请添加它。
Expander.toggleClass（'active'）；
//与.basic info相同，我们使用toggle类，而不是
//CSS硬编码，因此我们可以切换
$（'.basic info'）.toggleClass（'black-border-left'）；
if（$（this.attr（'id'）！==activeBox）{
Expander.removeClass（'active'）；
//为了消除第一次单击一个.box div时的延迟
//当activeBox=''时。
如果（活动框！=''）{
setTimeout（函数（）{
Expander.addClass（'active'）；
}, 500);
}否则{
Expander.addClass（'active'）；
}
activeBox=$（this.attr（'id'）；
}
$（'#main'）。文本（activeBox）；
log（'activeBox='+activeBox）；
});
您可以执行
if（foo）{…}else if（bar）{…}
，其中第二个仅在
foo
为falsy且
bar
为truthy时执行。if语句教程？我不知道那会是什么，只要读一下JS控制结构就可以了。你可以做
if（foo）{…}else if（bar）{…}
，其中第二个只有在
foo
是falsy并且
bar
是truthy时才执行。一个if语句教程？我不确定那会是什么，只需阅读JS控件结构。谢谢，但这仍然不能改变以下事实：
$（'.basic info'）.css（'border-left'，'0px solid black'）在你点击另一个框后被删除…好的。点击非活动框，您得到了
$（'.basic info'）.css（'border-left'，'1px纯黑'）
，因此它显然覆盖了
$（'basic info'）.css（'border-left'，'0px'）
谢谢，但这仍然不能改变
$（'basic info'）.css（'border-left'，'0px纯黑'）在你点击另一个框后被删除…好的。点击非活动框，您得到了
$（'.basic info'）.css（'border-left'，'1px纯黑色'）
，因此它显然覆盖了
$（'.basic info'）.css（'border-left'，'0px'）
好主意+从我这里得到1。任何不必
切换class
$（'.basic info.'）
的方法，或者使用此方法是不可避免的……这取决于您试图如何处理该
$（'.basic info'）
但我不知道你的理想方法是什么，我的代码中有一个输入错误，是
toggleClass（'.black border-left'）
而不是
toggleClass（'black-border-left'）
$(document).on('click', '.box', function(e) {
  if (!$('#expander').hasClass('active')) {
    $('#expander').addClass('active');
    $('.basic-info').css('border-left', '1px solid black');
    activeBox = $(this).attr('id');
    $('#main').text(activeBox);
    console.log('activeBox = ' + activeBox);
  } else if ($('#expander').hasClass('active')) {
    $('#expander').removeClass('active');
    $('.basic-info').css('border-left', '0px solid black');
    if ($(this).attr('id') !== activeBox) {
      setTimeout(function() {
        $('#expander').addClass('active');
      }, 256);
    }
    activeBox = $(this).attr('id');
    $('#main').text(activeBox);
    console.log('activeBox = ' + activeBox);
  }
});