JQuery:切换单击的元素并隐藏所有其他元素

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();

});

检查演示

更新说明:

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

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

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

Answer 2

它可以简单得多:更新小提琴

var all_spans = $('.item span').hide();

$('.item a').click(function(e){
    var thisSpan = $(this).parent().find('span'),
        isShowing = thisSpan.is(":visible");

    // Hide all spans
    all_spans.hide();

    // If our span *wasn't* showing, show it
    if (!isShowing) {
        thisSpan.show();
    }

    e.preventDefault();
});

您的代码的主要问题是您正在检查a元素是否可见,而不是检查是否可见span.

你的代码也成为了暗杀全球恐怖的牺牲品:

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

...它创建了一个全局变量,$this因为你没有在任何地方声明它.