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

【问题标题】：same button for show/hide in jqueryjquery中显示/隐藏的相同按钮
【发布时间】：2016-07-24 10:08:42
【问题描述】：

如何在这个 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; }

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

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

【问题讨论】：

标签： jquery html css show-hide

【解决方案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/

【讨论】：

太棒了谢谢你我更新了我的jsfiddle！只是想知道我们可以用 css 得到完全相同的东西吗？
我不认为你可以，隐藏/显示/切换功能使用css来显示或隐藏你的元素，但你需要JS来触发你的事件。
啊好吧，我就是这么想的！！！只有使用 css 才能获得相同的结果？
我忘了 hover :) 你也可以这样做 @coolio83000 但我认为你会有更多使用 jQuery 的可能性

【解决方案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;
}

【讨论】：