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

更新说明：

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

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

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

Answer 2

它可以简单得多：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();
});

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

您的代码也在此行中成为The Horror of Implicit Globals的牺牲品：

$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

<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>

结束摘录

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

JS

4 个答案: