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

我想隐藏任何可见的跨度元素（如果有），并在单击元素时再次切换它

<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/ http://jsfiddle.net/BGSyS/

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

 $('.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();

});

Check demo http://jsfiddle.net/BGSyS/3/

更新并解释：

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

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

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