javascript - JS/jQuery-如果语句不带“return”

*此问题已更新。

我有一组框，单击这些框会打开一个名为#expander的div。在我的代码中，打开#expander后，如果单击了另一个框，则检查单击的新框是否与最后单击的框相同。如果相同，则关闭#expander，否则我将其短暂关闭，然后再次将其打开。

此jsfiddle演示了这一点

这是stackoverflow中的相同代码：

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

  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);
    return;
  }
});

#expander{
  height: 100%;
  width: 0%;
  float: left;
  visibility: hidden;
  overflow: hidden;
  background-color: grey;
  transition: .75s ease-out;
}
#expander.active{
  height: 100%;
  width: 50%;
  z-index: 1;
  visibility: visible;
}
#closer{
  padding: 4px;
  margin: 0px;
  background-color: #707070;
  color: white;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}
#closer:hover{
  background-color: #606060;
  font-size: 2em;
  padding: 0px;
}
.box{
  width: 32px;
  height: 32px;
  padding: 5px 0px;
  margin: 0px 4px;
  display: inline-block;
  background-color: grey;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.basic-info{
  padding: 8px 16px;
  color: white;
  background-color: #47a;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  transition: .5s ease-out;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expander">
  <div id="closer" title="Close"><span>&times</span></div>
  <div id="main"></div>
</div>
<div class="basic-info">
  <div id="box1" class="box">1</div>
  <div id="box2" class="box">2</div>
  <div id="box3" class="box">3</div>
</div>

上面的代码有效（尽管看起来与最终布局看起来并不完全一样），但是它不能执行以下操作：$('.basic-info').css('border-left', '1px solid black');第一次单击框后（打开#expander

我意识到这不起作用的原因是JS代码首先添加了类和样式，但是接下来的if语句删除了类和样式。另外，我必须粘贴以下代码两次：

$('#main').text(activeBox);
console.log('activeBox = ' + activeBox);
return;

有谁知道一种更好的方式来布置我的if语句，以使代码不会冲突？另外，有没有一种方法不需要使用return;？

附言有没有人链接到好的if statement技巧教程，以便将来我可以学习这些内容？

谢谢。



更新：

我已经根据当前答案更新了代码，并将JS更改为：

$(document).on('click', '.box', function(e) {
  if ($('#expander').hasClass('active')) {
    $('#expander').removeClass('active');
    if ($(this).attr('id') !== activeBox) {
      setTimeout(function() {
        $('#expander').addClass('active');
      }, 256);
      activeBox = $(this).attr('id');
      console.log('activeBox = ' + activeBox);
      return;
    }
    $('.basic-info').css('border-left', '0px solid white');
    return;
  }
  $('#expander').addClass('active');
  $('.basic-info').css('border-left', '1px solid white');
  activeBox = $(this).attr('id');
  console.log('activeBox = ' + activeBox);
}

（它做同样的事情，只是布局不同）。我现在要弄清楚的是，我如何可以在没有任何return;的情况下编写此代码，因此也不必两次编写activeBox = $(this).attr('id'); console.log('activeBox = ' + activeBox);（除非这些事情是不可能/不可避免的）

谢谢。

最佳答案

对于清理部分并去除重复的数据，您可以将您的js代码转换为

更新

jsFiddle

// target the #expander
var Expander = $('#expander'),
  activeBox = '';

$(document).on('click', '.box', function(e) {
  //toggleClass means if #expander hasClass, remove it, if it
  //doesn't have the class, add it.
  Expander.toggleClass('active');
  // same for .basic info, we use toggle class, instead of
  // CSS hardcoded, thus we can toggle
  $('.basic-info').toggleClass('black-border-left');

  if ($(this).attr('id') !== activeBox) {
    Expander.removeClass('active');
    // to get rid of the delay for when one .box div is clicked for the first time
    // when activeBox = ''.
    if(activeBox !== ''){
      setTimeout(function() {
        Expander.addClass('active');
      }, 500);
    }else{
      Expander.addClass('active');
    }
    activeBox = $(this).attr('id');
  }
  $('#main').text(activeBox);
  console.log('activeBox = ' + activeBox);
});