18

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

<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'仍然可见并且我想切换它时

4

4 回答 4

31 
 $('.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');
于 2013-07-14T08:41:59.390 回答
5

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

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，因为您没有在任何地方声明它。

于 2013-07-14T08:42:19.233 回答
0

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

$(".item a").click(function() {
  // Hide all item spans
  $(".item span").hide();
  // Show the element next to this
  $(this).next().show();
});
于 2013-07-14T08:41:03.373 回答
-1

开始片段：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();
      }
   });
}

语言：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>

结束片段

于 2016-03-03T11:04:59.423 回答