Question

如何仅通过javascript在具有平滑过渡效果的项目中添加手风琴。

在下面的代码中，过渡时间为200s，但没有显示过渡效果。我尝试了很多代码，但是没有用。我想通过纯JavaScript做到这一点。

此外，在打开和关闭手风琴之后，悬停效果消失了。有没有办法用javascript修复它。

function openaccn() {
var i = document.getElementById('acc');
var j = document.getElementById('acc_contnt');
if (j.style.display === "block") {
      i.style.textDecoration = "none";
      i.style.color = "#fff";
      j.style.transition = "all 2000s";
      j.style.display = "none";
    } else {
      i.style.textDecoration = "underline";
      i.style.color = "deepskyblue";
      j.style.transition = "all 2000s";
      j.style.display = "block";
    }
}

nav {
background: grey;
width: 100%;
}
ul li{
list-style: none;
display: inline-block;
padding: 2px 5px;
}
ul li a {
text-decoration: none;
color: #fff;
display: block;
padding:5px;
margin-right: 10px;
}
ul li a:hover {
 color: deepskyblue;
}
.accrdncontnt {
height: 100px;
width: 100%;
background:skyblue;
padding: 10px 5%;
text-align: center;
display: none;
}

<nav>
<ul>
<li><a href="#">Menu</li>
<li><a id="acc" href="#" onclick= openaccn();>Accordion(click to open)</li>
<li><a href="#">terms</li>
</ul>
</nav>
<div id="acc_contnt" class="accrdncontnt"><p>This dropdown should display in smooth transition</p><div>

Answer 1

首先，您的代码构造器大多错误（未关闭链接标记等），我重新创建了您的项目。 display属性不支持transition属性，因此您可以将visibliy和opacity一起使用以获得过渡效果。

var i = document.getElementById('acc');
var j = document.getElementById('acc_contnt');
i.addEventListener('click', function() {
  j.classList.toggle('toggled');
})

nav {
background: grey;
width: 100%;
}
ul li{
list-style: none;
display: inline-block;
padding: 2px 5px;
}
ul li a {
text-decoration: none;
color: #fff;
display: block;
padding:5px;
margin-right: 10px;
}
ul li a:hover {
 color: deepskyblue;
}

.accrdncontnt {
  height: 100px;
  width: 100%;
  background:skyblue;
  padding: 10px 5%;
  text-align: center;
  opacity:0;
  visibility:hidden;
  box-sizing:border-box;
  transition: 250ms ease
}

.accrdncontnt.toggled{
  opacity:1;
  visibility:visible
}

<nav>
<ul>
  <li><a href="#">Menu</a></li>
  <li><a id="acc" href="#">Accordion(click to open)</a></li>
  <li><a href="#">terms</a></li>
</ul>
</nav>
<div id="acc_contnt" class="accrdncontnt"><p>This dropdown should display in smooth transition</p><div>

Answer 2

最大程度地更改了样式，并在HTML中添加了结束标记。我删除了我在评论中所说的所有内联CSS，以避免出现特异性问题。

结果不是完美的，因为<p>中的文本看起来有点怪异，但是否则我们必须转换最小高度，scaleY或其他可以隐藏内容的内容。 #accrdncontnt，但不使用无显示。如果手风琴下面没有其他内容，隐藏的可见性将是完美的。

function openaccn() {
  var i = document.getElementById('acc');
  var j = document.getElementById('acc_contnt');
  i.classList.toggle( 'active' );
  j.classList.toggle( 'active' );
}

nav {
  background: grey;
  width: 100%;
}
ul li{
  list-style: none;
  display: inline-block;
  padding: 2px 5px;
}
ul li a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding:5px;
  margin-right: 10px;
}
ul li a:hover {
 color: deepskyblue;
}
/* overwrite the "ul li a text-decoration: none;" rule above us */
#acc.active {
  text-decoration: underline;
}
.accrdncontnt {
  /* we cannot set the display to none, if we want to transition height */
  /* display none means the element is not considered is the layout */
  /* so we cannot calculate a transition on a non existing element */
  /* we could use visbility hidden instead of display none to hide the element */
  /* but that would make the empty space always visible */
  /* we want to transition the height */
  height: 0px;
  width: 100%;
  background-color: skyblue;
  text-align: center;
   /* add transition here, 2000ms or 2s */
   /* 2000s will take more than an hour, so it's probably a typo */
  transition: height 2s;
}
/* to make the content of .accrdncontnt invisible until the parent is active */
.accrdncontnt > * {
  display: none;
}
.accrdncontnt.active {
  height: 100px;
  /* add the padding here, else we'd always seee the blue background of the padding */
  padding: 10px 5%;
  transition: height 2s;
}
.accrdncontnt.active > * {
  display: block;
}

<nav>
  <ul>
    <li>
      <a href="#">Menu</a>
    </li>
    <li>
      <a id="acc" href="#" onclick= openaccn();>Accordion(click to open)</a>
    </li>
    <li>
      <a href="#">terms</a>
    </li>
  </ul>
</nav>
<div id="acc_contnt" class="accrdncontnt">
  <p>This dropdown should display in smooth transition</p>
<div>

JavaScript过渡

2 个答案: