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

我希望隐藏任何可见的span元素（如果有的话），如果单击某个元素，则再次切换它

 element1 span1 
 
 
 element2 span2 
 
 
 element3 span3 
 
 
 element4 span4 
  

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

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

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

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

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

Answer 3

您可以使用跨度选择器隐藏所有跨度，然后使用$（this）关键字查找单击链接旁边的跨度：

 $(".item a").click(function() { // Hide all item spans $(".item span").hide(); // Show the element next to this $(this).next().show(); }); 

Answer 4

开始片段：js hide：false

语言：lang-js

 function itemshow(n,e){ var idx = "num_"+n; $(".item_title").each(function(){ var idn = $(this).next().attr("id"); if (idn == idx){ $("#"+idn).toggle(); }else{ $("#"+idn).hide(); } }); } 

语言：lang-css

 .item_desc{ display: none; } 

语言：lang-html

  
 
 1) Question 
 
 Answer 
 
 2) Question 
 
 Answer 
 
 3) Question 
 
 Answer 
  

结束片段