jquery 中 show/hide 的相同按钮

Question

如何在这个 jsfiddle 示例中使用相同的按钮来显示和隐藏

代码如下：

HTML

<button id="show">></button>
<button id="hide">Hide</button>
<div class="defaut"><a href="#">FR</a></div>
<div class="hide"><a href="#">EN</a></div>
<div class="hide"><a href="#">DE</a></div>

CSS

.show, .hide {float: left; display: inline-block;}    
.defaut, .hide {margin: 0px; padding: 0px; width: 40px; float: left; text-align: center; }    
.langue {  width: 60px; }    
.defaut {display: inline-block; }    
.hide {display: none; }

JS

$( "#show" ).click(function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
    $("div").show(250);
  });
});

$( "#hide" ).click(function() {
  $( ".hide" ).hide( 250 );
});

Answer 1

您可以使用切换功能轻松完成：

HTML

<button id="toogle">Toggle</button>


<div class="defaut"><a href="#">FR</a></div>
<div class="hide">  <a href="#">EN</a></div>
<div class="hide">  <a href="#">DE</a></div>

jQuery

$( "#toogle" ).click(function() {
$( ".hide" ).toggle('slow');
});

JSFiddle：https://jsfiddle.net/dy4msc8d/

Answer 2

仅 css - 仅当您将 show/hide 悬停时 - 而不是点击。类似这样的东西 https://jsfiddle.net/ozf2vg6n/3/ 但这与你想要的不完全一样

.wrapper {
  width: 70px;
  height: 20px;
  overflow: hidden;
  transition: all 0.3s linear;
}

.wrapper:hover {
  width: 150px;
  // don't forget to add prefixes
  transition: all 0.3s linear;
}

jquery 中 show/hide 的相同按钮

same button for show/hide in jquery

html

css

jquery

show-hide

代码如下：