在jquery中显示/隐藏的相同按钮

Question

如何在此jsfiddle示例中使用相同的按钮进行显示和隐藏

https://jsfiddle.net/kodjoe/ozf2vg6n/

代码如下：

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 - 仅当您在悬停时显示/隐藏 - 而不是单击。像这样的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;
}