首页 新闻 搜索 专区 学院

我想做一个功能,jquery的显示与隐藏,但是是一个列表,做起来有BUG。

0
悬赏园豆:5 [已解决问题] 解决于 2013-12-26 10:30

点击右边的展示,会显示出更多的文字。而隐藏,则显示最初的文字。现在我的列表是一个LI,但是我补捉不到当前要显示与隐藏的对象,一展示,全部的都会显示出来,一隐藏,所有的都会隐藏了,求各位大侠指点迷津。

 

 

 

 

 

 <li><span class="listtitle"><a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="如何预防颈椎病">如何预防颈椎病</a></span><span class="zhankai">展开↓</span>
<span class="meto">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。<span class="allmeto" style="display:none;">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。</span>...[<a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="查看详细">详细内容</a>]</span>
</li>
                   
                   <li><span class="listtitle"><a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="如何预防颈椎病">如何预防颈椎病</a></span><span class="zhankai">展开↓</span>
<span class="meto">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。<span class="allmeto" style="display:none;">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。</span>...[<a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="查看详细">详细内容</a>]</span>
</li>

//这是脚本

<script>
$(document).ready(function(){
 $(".main_li ul li .zhankai").click(function(){
  var $mark=$(".main_li ul li span.allmeto:gt(0)");
  if($mark.is(":visible")){
   $mark.hide(200); 
   $(this).html("展开↓");
  } 
  else{
   $mark.show(200);
   $(this).html("隐藏↑"); 
  }
 }); 
});
</script>

路过春秋的主页 路过春秋 | 初学一级 | 园豆:10
提问于:2012-12-20 14:52
< >
分享
最佳答案
0

你给<span class="meto">增加一个ID,值和当间这条数据的ID,比如<span id="span_862" class="meto">
然后控制这个span进行显示和隐藏

function show(id)

{

  $("#span_" + id).show();

}

function hide(id)

{

  $("#span_" + id).hide();

}

收获园豆:5
Rich.T | 老鸟四级 |园豆:3440 | 2012-12-20 15:26

$(document).ready(function(){
  function show(id){
   $mark=$("#allmeto_"+id);
   if($mark.is(":visible")){
    $mark.hide(200); 
   }
   else{
    $mark.show(200);
   }
  }
 });

 

 

 

 <li><span class="listtitle"><a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="如何预防颈椎病">如何预防颈椎病</a></span><span class="zhankai" onclick="show(1);">展开↓</span>
<span class="meto">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。<span id="allmeto_1" style="display:none;">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。</span>...[<a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="查看详细">详细内容</a>]</span>
</li>
                   
                   <li><span class="listtitle"><a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="如何预防颈椎病">如何预防颈椎病</a></span><span class="zhankai" onclick="show(2);">展开↓</span>
<span class="meto">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。<span id="allmeto_2" style="display:none;">近年来颈椎病的发病率是很高的,对人们的生活和工作造成很大影响,所以要重视预防,常州和平医院专家指出,颈椎病的预防要从生活中的点滴做起,如选择合适的枕头、注意颈部保暖等。</span>...[<a href="http://www.jingzhuibing.com/zhengzhuang/862.html" target="_blank" title="查看详细">详细内容</a>]</span>
</li>

 

这样还是不行,JS报错

路过春秋 | 园豆:10 (初学一级) | 2012-12-20 15:43

@路过春秋: 

请仔细看我的回复,你都没理解

<span id="span_862" class="meto">

Rich.T | 园豆:3440 (老鸟四级) | 2012-12-20 15:47
其他回答(3)
0

这个就是自己写show 和hide也是可以的啊

http://jqueryui.com/accordion/#sortable

chenping2008 | 园豆:9836 (大侠五级) | 2012-12-20 15:12

但这是好多个LI呀,我隐藏的话,下面的也跟着隐藏,而我只想单个隐藏。点击哪个,哪个下面的span就展开隐藏。

支持(0) 反对(0) 路过春秋 | 园豆:10 (初学一级) | 2012-12-20 15:15

@路过春秋: jquery的选择器可以帮助到你

你或者可以<li onclick="do()"></li>

function do()

{

  if(show)

{

hide();

}

else

{

show

}

}

支持(0) 反对(0) chenping2008 | 园豆:9836 (大侠五级) | 2012-12-20 15:23
0

可以ID不一样

Tom.汤 | 园豆:2002 (老鸟四级) | 2012-12-20 15:27
0

其实不用那么复杂了,只要指定一个标签,然后再找与这个标签同一级的其它标签,指定属性值即可:

$(".zhankai").click(function() {   //指定点击隐藏或显示的class
     var $mark = $(this).parent().find(".meto");  //找到它的父级,通过父级再找到要隐藏或显示的子标签
     if ($mark.is(":visible")) {
            $mark.hide();
     }
     else {
             $mark.show();
     }
});

根据自己的情况再作其它修改

KivenRo | 园豆:1722 (小虾三级) | 2012-12-20 16:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册