Question

使用Google+环聊API，我试图简单地切换div的可见性。让它工作，但它需要两次点击才能开始（之后只需要一次来回点击）。这似乎是一个常见的切换问题，但解决方案总是不同的。可能很容易。帮助不大？谢谢！

<script>
//Fetches and displays participants
function showParticipants() {
  var participants = gapi.hangout.getParticipants();

  var retVal = '<p>Participants: </p><ul>';

  for (var index in participants) {
    var participant = participants[index];

    if (!participant.person) {
      retVal += '<li>A participant not running this app</li>';
    }
    retVal += '<li>' + participant.person.displayName + '</li>';

  }

  retVal += '</ul>';

//Toggles visibility of participantsDiv
  var div = document.getElementById('participantsDiv');
  if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }

  div.innerHTML = retVal;

}

function init() {
  // When API is ready...                                                         
  gapi.hangout.onApiReady.add(
      function(eventObj) {
        if (eventObj.isApiReady) {
          document.getElementById('showParticipants')
            .style.visibility = 'visible';
        }
      });
}

// Wait for gadget to load.                                                       
gadgets.util.registerOnLoadHandler(init);
</script>

Answer 1

我可以看到的一种可能的情况是，最初通过其他方式隐藏你的div，用css说。这可能发生，因为您的比较if (div.style.display !== 'none')将成功，因为显示属性将大部分为空或未定义（基于浏览器）并且它将应用none以显示然后由于您的比较它将开始正常工作。

尝试这种方式：

if (div.style.display && div.style.display !== 'none') {
    div.style.display = 'none';
} else {
    div.style.display = 'block';
}

<强> Fiddle

或者只是将其简化为：

    var div,display;
    div = document.getElementById('participantsDiv');
    display = div.style.display;
    div.style.display = (display && display !== 'none') ? 'none' : 'block';

在上面的示例中，我最初提供了一个css类来隐藏div。删除它，看看发生了同样的行为。

Answer 2

可能是因为participantsDiv在执行display之前没有定义if(display !== 'none')属性。如果是这种情况，它会触发两次，因为当它看到NULL值与你的字符串值不同时，该语句返回FALSE。

JavaScript切换可见性需要两次点击

2 个答案: