jQuery隐藏和显示切换div与加号和减号图标 [英] jQuery hide and show toggle div with plus and minus icon

问题描述

我有代码工作的显示和隐藏 div 。

例如： + 显示我的图标

这是代码，我有：
http://jsfiddle.net/BLkpG/

  $ document）.ready（function（）{
 $（。slidingDiv）。hide（）; 
 $（show_hide）。show（）; 
 
 （'.show_hide'）。click（function（）{
 $（。slidingDiv）。slideToggle（）; 
}）; 
}）; 
  

需要将图片更改为上述内容时切换到 + strong> - 。

感谢

解决方案

  
 $（document）.ready（function（）{
 
 $（。slidingDiv）。hide（）; 
 $（show_hide）。show（）; 
 
 $（'。show_hide'）。toggle（function（）{
 $（＃plus）。text（ - ）; 
 $（。slidingDiv）。 slideDown（）; 
 
}，function（）{
 $（＃plus）。text（+）; 
 $ （）; 
}）; 
 
}）; 
  

HTML

 < a href =＃class =show_hideid =plus> +< / a> 
 
< div class =slidingDivstyle =display：block;> 
查看更新的jQuery插件，这样做：< a href =http://papermashup.com/jquery-show-hide-plugin/class =show_hidetarget =_ blankstyle = display：inline;> jQuery显示/隐藏插件< / a> 
< / div> 
  

CSS

  .show_hide {
 display：none; 
} 
 .a {
 font：2em Arial; 
 text-decoration：none 
} 
  

DEMO

请在此查看此教程http://www.webstutorial.com/simple-jquery-toggle-tutorial-css-jquery-slide-toggle / jquery

DEMO

I have the code working for the show and hide the div. How would I add two different icons as a sprite image for when the show and hide are active?

For example: + icon for show me, then a - icon for hide me.

Here is the code, I have: http://jsfiddle.net/BLkpG/

$(document).ready(function(){
   $(".slidingDiv").hide();
   $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
  });
});

Need to change image to the above when toggled to a + or -.

Thanks

解决方案

Try something like this

jQuery

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       $("#plus").text("-");
       $(".slidingDiv").slideDown();

   },function(){
       $("#plus").text("+");
       $(".slidingDiv").slideUp();
   });

});

HTML

<a href="#" class="show_hide" id="plus">+</a>

<div class="slidingDiv" style="display: block;">
    Check out the updated jQuery plugin for doing this: <a href="http://papermashup.com/jquery-show-hide-plugin/" class="show_hide" target="_blank" style="display: inline;">jQuery Show / Hide Plugin</a>
</div>

CSS

.show_hide {
    display:none;
}
.a{
    font: 2em Arial;
    text-decoration: none
}

DEMO

Check this tutorial here http://www.webstutorial.com/simple-jquery-toggle-tutorial-css-jquery-slide-toggle/jquery

DEMO

这篇关于jQuery隐藏和显示切换div与加号和减号图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！