javascript - 为什么我必须在 <a> 上单击两次才能让 jQuery 更改它的 CSS？

Question

我目前有这个 jQuery 代码:

$('.chooser .options > li').on('click', function (e) {
    alert(e.target.innerHTML)
});

$('.chooser .toggle').on('click', function (e) {

    e.target.nextElementSibling.style.visibility = (e.target.nextElementSibling.style.visibility == "hidden") ? "visible" : "hidden";

    e.target.nextElementSibling.style.opacity = (e.target.nextElementSibling.style.opacity == "0") ? "1" : "0";

});

这是由 <a> 触发的元素。但是，如果您在 anchor 上单击一次，它不会执行任何操作。单击两次，CSS 已更改。为什么会这样，我该如何解决？我认为这与更改样式表有关。

http://jsfiddle.net/Godisgood/03vc88r7/2/

$('.chooser .options > li').on('click', function(e) {
  alert(e.target.innerHTML)
});

$('.chooser .toggle').on('click', function(e) {

  e.target.nextElementSibling.style.visibility = (e.target.nextElementSibling.style.visibility == "hidden") ? "visible" : "hidden";

  e.target.nextElementSibling.style.opacity = (e.target.nextElementSibling.style.opacity == "0") ? "1" : "0";

});

.chooser {
  display: inline-block;
  list-style: none;
  position: relative;
}
.container {} .options {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 2s;
}
a {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="chooser container"><a class="chooser toggle">__</a>

    <ul class="chooser options">
      <li>christian</li>
      <li>homeschooler</li>
      <li>family</li>
    </ul>
  </div>

Answer 1

嗯..不太确定，但我建议这样做

http://jsfiddle.net/03vc88r7/5/

CSS

.chooser {
    display: inline-block;
    list-style: none;
    position: relative;
}
.container {
}
.options {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all 2s;
}
.visible {
    opacity:1;
    visibility: visible;
}
a {
    cursor: pointer;
}

JS

$('.chooser .options > li').on('click', function (e) {
    alert(e.target.innerHTML)
});

$('.chooser .toggle').on('click', function (e) {

    if($('.options').hasClass('visible')){
        $('.options').removeClass('visible');
    }else{
         $('.options').addClass('visible');   
    }
});