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

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

代码如下： HTML

JS

---

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

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>

---

JSFIDLE:

仅使用css-仅当您将在悬停时显示/隐藏-而不是单击。像这样的东西，但那和你想要的不完全一样

.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;
}

---

太棒了谢谢你我更新了我的JSFIDLE！！我只是想知道，我们可以用css做完全相同的事情吗？我不认为你可以，hide/show/toggle函数使用css来显示或隐藏你的元素，但是你需要JS来触发你的事件。啊，好吧，这就是我想的！！！有一种不同的方法可以只使用css获得相同的结果？我忘记了悬停：）您也可以使用@coolio83000这样做，但我认为使用jQuery会有更多的可能性

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

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

<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>

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

.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;
}