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

JQuery: Toggle Element that is clicked and hide all other

提问by Ahmad Ajmi

I want to hide any visible span elements if any is visible, and toggle it again if a element is clicked

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

<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

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

});

live example http://jsfiddle.net/BGSyS/

现场示例http://jsfiddle.net/BGSyS/

the issue is when I click for example 'element 1' 'span1' is still visible and I want to toggle this

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

回答by Khanh TO

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

检查演示

Update with explanation:

更新说明：

The problem is when you hide all spans, you also hide the current span => all spans have the same state (hidden), and your next line display it again. You have to exclude the current element when hiding and use toggle method to toggle its state (simpler than using if to check)

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

Another problem is try to avoid implicit global by using varto declare $this:

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

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

回答by T.J. Crowder

It can be much simpler than that: Updated Fiddle

它可以比这简单得多：更新的小提琴

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

The main problem with your code was that you were checking whether the aelement was visible, rather than checking whether the spanwas.

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

Your code also fell prey to The Horror of Implicit Globalson this line:

您的代码也在这一行成为了隐式全局变量的牺牲品：

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

...which creates a global variable $thisbecause you didn't declare it anywhere.

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

回答by CodingIntrigue

You can hide all the spans by using a span selector, then using the $(this) keyword to find the span next to the clicked link:

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

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

回答by Zura Kiziria

begin snippet: js hide: false

开始片段：js隐藏：假

language: lang-js

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

language: lang-css

语言：lang-css

.item_desc{
   display: none;
 }

language: lang-html

语言：lang-html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div class="div_body">
   <div class="item_title" onclick="itemshow(1,this)">        
        1) Question                           
  </div>
      <div class="item_desc"  id="num_1">
        Answer                           
      </div> 
   <div class="item_title" onclick="itemshow(2,this)">        
        2) Question                           
  </div>
      <div class="item_desc"  id="num_2">
        Answer                          
      </div> 
   <div class="item_title" onclick="itemshow(3,this)">        
        3) Question
  </div>
      <div class="item_desc"  id="num_3">
        Answer                          
      </div> 
</div>

end snippet

结束片段