Question

我有一些脚本，我可以真正使用一些帮助。一切都很好，但我希望div优雅而不是立即打开。我有所有关闭的默认值，需要保持这种方式。另外，我只想打开1个div，所以另一个必须在点击1时关闭。我尝试fadein和toggle但没有成功。有人可以帮我这个吗？

https://jsfiddle.net/lepew/xh5x4cgc/3/

＆＃13;

function toggle(id)
{
   var e = document.getElementById(id);

   if(e.style.display == 'block')
      e.style.display = 'none';	
   else
      var list = document.getElementsByClassName("dbn");
      for (var i = 0; i < list.length; i++)
      {
         list[i].style.display="none";
         e.style.display = 'block';
      }
}

＆＃13;

.dbn
{
   display: none;
   xfloat: right;
   xfloat: left;
   xwidth: 30%;
   xborder: .05em solid #000;
   border: 1px solid lime;
   padding: .8em;
   margin: 1em;
   box-shadow: 0 0 .3em #000;

}
#aa
{
   background-color:#f00;
   xfloat: left;
}

#bb
{
   background-color:#0f0;
   xfloat: left;
}

#cc
{   
   background-color:#00f;
   xfloat: left;
}

#pepe
{
border: 1px solid yellow;
}

.lepew
{
width: 150px;
display: inline-block;
background-color: lime;
}

＆＃13;

    <div id="pepe">
        <a onclick="toggle('aa');" class="lepew" style="cursor:pointer ">Peter</a>
        <a onclick="toggle('bb');" class="lepew" style="cursor:pointer ">Paul</a>
        <a onclick="toggle('cc');" class="lepew" style="cursor:pointer ">Mary</a>
    </div>
    <div id="aa" class="dbn">
        Content of Div aa
    </div>
    <div id="bb" class="dbn">
        Content of Div bb
    </div>
    <div id="cc" class="dbn">
        Content of Div cc
    </div>
    <br />
    <br />
<div>
Nuthing here
</div>
    <br />
    <br />
    <br />

＆＃13;

Answer 1

从此页面：http://api.jquery.com/slideDown/。

从jQuery 1.6开始，.promise()方法可以与deferred.done()方法结合使用，在所有匹配元素完成动画时，为整个动画执行单个回调（参见example for .promise()）。

$("button").on("click", function () {
  var button = $(this);
  var parent = button.parent();
  var buttons = parent.children();
  var i = buttons.index(button);
  var panels = $("#panels").children();
  panels.finish(); // stop running animation
  panels.slideUp().promise().done(function () {
    $("#panels").children().eq(i).slideDown();
  });
});

#buttons { margin-bottom: .5em; }
#panels > div { padding: .5em; }
#panels > div { display: none; }
#panel-1 { background: #c5e1a5; }
#panel-2 { background: #fff59d; }
#panel-3 { background: #b2dfdb; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <button type="button">panel #1</button>
  <button type="button">panel #2</button>
  <button type="button">panel #3</button>
</div>
<div id="panels">
  <div id="panel-1">panel #1</div>
  <div id="panel-2">panel #2</div>
  <div id="panel-3">panel #3</div>
</div>

Answer 2

如何仅使用javascript来解决jquery或CSS解决方案，使用:focus检测点击并使用keyframes设置div高度动画

＆＃13;

.my-menu {
  border: 1px solid yellow;
  width: 100%;
  background-color: #6D565E;
  position: fixed;
  z-index: 100;
}

.my-menu a {
  display: inline-block;
  text-align: center;
  color: white;
  font-size: 36px;
  padding: 10px;
  position: relative;
}

.my-menu a:hover {
  background-color: #F4D7CB;
}

.my-menu a span {
  position: absolute;
  background-color: pink;
  text-align: center;
  height: 0px;
  width: 600px;
  top: 80px;
  left: 0;
  color: #6D565E;
  overflow: hidden;
}

.my-menu a:focus span {
  -webkit-animation-name: slidedown;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s;
  /* Safari 4.0 - 8.0 */
  animation-name: slidedown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@-webkit-keyframes slidedown {
  0% {
    height: 0px;
  }
  100% {
    height: 600px;
  }
}


/* Standard syntax */

@keyframes slidedown {
  0% {
    height: 0px;
  }
  100% {
    height: 600px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-menu">
  <a class="lepew" href="#.">Peter<span>
  Content of Div aa
</span>
</a>

  <a class="lepew" href="#.">Paul<span>
  Content of Div bb
</span></a>
  <a class="lepew" href="#.">Mary<span>
  Content of Div cc
</span></a>
</div>



<br />
<br />
<div>
  Nuthing here
</div>
<br />
<br />
<br />

＆＃13;

我不能优雅地打开我的div

2 个答案: