javascript - 如何切换被单击的元素并隐藏所有其他元素？

Question

我想隐藏任何可见的 span 元素(如果有的话)，并在单击某个元素时再次切换它

<div class="item">
    <a href="">element1</a> <span>span1</span>
    <br>
</div>

<div class="item">
    <a href="">element2</a> <span>span2</span>
    <br>
</div>

<div class="item">
    <a href="">element3</a> <span>span3</span>
    <br>
</div>

<div class="item">
    <a href="">element4</a> <span>span4</span>
    <br>
</div>

JS

$('.item span').hide();

var all_spans = $('.item a').parent().find('span');

$('.item a').click(function(e) {

    e.preventDefault();
    // hide all span
    all_spans.hide();
    $this = $(this).parent().find('span');
    // here is what I want to do
    if ($this.is(':hidden')) {
        $(this).parent().find('span').show();
    } else {
        $(this).parent().find('span').hide();
    }

});

实例http://jsfiddle.net/BGSyS/

问题是当我点击例如“element 1”时“span1”仍然可见，我想切换它

Answer 1

 $('.item span').hide();

$('.item a').click(function(e){

    e.preventDefault();
    // hide all span
    var $this = $(this).parent().find('span');
    $(".item span").not($this).hide();

    // here is what I want to do
    $this.toggle();

});

检查 demo

更新说明:

问题是当你隐藏所有跨度时，你也隐藏了当前跨度=>所有跨度都有相同的状态(隐藏)，你的下一行再次显示它。隐藏时必须排除当前元素，并使用 toggle 方法切换其状态(比使用 if 来检查更简单)

另一个问题是通过使用 var 来声明 $this 来尝试避免隐式全局:

var $this = $(this).parent().find('span');