javascript展开/折叠文本 - 默认折叠答案

【问题标题】：javascript expand/collapse text - collapse on defaultjavascript展开/折叠文本 - 默认折叠
【发布时间】：2017-05-10 14:55:48
【问题描述】：

我在 javascript 方面非常缺乏经验，但已经设法（在 google 的帮助下）整理了以下可展开/可折叠的链接

<script type="text/javascript">
function toggleMe(a) {
   var e = document.getElementById(a);
   if(!e) return true;

   if(e.style.display == "none") {
      e.style.display = "block"
   }
   else {
      e.style.display = "none"
   }
   return true;
}
</script>
<p>
  <input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
   <strong><em>text text text text</em></strong>
</p>

唯一的问题是它默认展开，我希望它默认折叠。有人能帮忙吗？谢谢！此外，如果有人知道如何让链接旁边的 +/- 符号根据它是展开还是折叠而改变，那就太好了。

【问题讨论】：

标签： javascript if-statement expand

【解决方案1】：

<script type="text/javascript">
function toggleMe(a) {
   var e = document.getElementById(a);
   var toggleIcon = document.getElementById('toggle-icon');
   if(!e) return true;

   if(e.style.display == "none") {
      e.style.display = "block";
      toggleIcon.innerHTML = '-';
   }
   else {
      e.style.display = "none";
      toggleIcon.innerHTML = '+';
   }
   return true;
}
</script>
<p>
  <input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
  <span id="toggle-icon">+</span>
</p>
<p id="para1" style="display: none;">
   <strong><em>text text text text</em></strong>
</p>

【讨论】：

【解决方案2】：

您可以尝试在样式声明中添加如下显示选项：

<p id="para1" style="display:none"><strong><em>text text text text</em></strong></p>

打开html时默认会折叠，希望对你有帮助...

【讨论】：

【解决方案3】：

选项 1：

将此添加到您的 css 以默认隐藏它：

#para1 {
    display: none;
}

选项 2：

将您的脚本向下移动，并首先将其命名为toggleMe('para1');，以便您先将其隐藏。

<p>
  <input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
   <strong><em>text text text text</em></strong>
</p>
<script type="text/javascript">
function toggleMe(a) {
   var e = document.getElementById(a);
   if(!e) return true;

   if(e.style.display == "none") {
      e.style.display = "block"
   }
   else {
      e.style.display = "none"
   }
   return true;
}
toggleMe('para1');
</script>

【讨论】：

【解决方案4】：

丹尼尔对你的问题有正确的答案。这比您要求的要多一点，但我认为如果您操作类而不是元素样式属性，您将有更好的时间。只是让它更灵活一点。

在下面的示例中，我将您的代码包装在一个通用元素中，然后更改该元素的类以达到您想要的效果。这让我也可以轻松地添加你的加号和减号。

它有点原始，但你可以看到它可以带你去哪里。希望对您有所帮助。

https://jsfiddle.net/6xoe1b94/

function toggleMe(a) {
   
   var e = document.getElementById('wrapper');
   if(! e.classList.contains('active')) {
      e.classList.add('active');
   }
   else {
      e.classList.remove('active');
   }
}

#para1{
  display:none;
}
.active #para1{
  display:block;
}

#plus{
  display:inline-block;
}
#minus{
  display:none;
}
.active #plus{
  display:none;
}
.active #minus{
  display:inline-block;
}

<div id='wrapper'>
<p>
  <input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" /><span id='plus'>+</span><span id='minus'>-</span>
</p>
<p id="para1">
   <strong><em>text text text text</em></strong>
</p>
</div>

【讨论】：

【解决方案5】：

我添加了一个解决方案，从您的 html 中删除 javascript 和 css。我还将您的展开/折叠element 更改为 div 而不是输入。我在div 中添加了一个span 元素，它根据#para1 是否为displayed 来更改它的文本内容（+ 或-）。此外，在 css 中，我将 display: none; 添加到 #para1（这最初隐藏了元素）、cursor: pointer;（当用户将鼠标悬停在它上面时显示它是可点击的）user-select: none;（当用户点击它时停止突出显示 div） .

// store elements
var expandEl = document.getElementById("expand");
var plusMinusEl = document.getElementById("plusMinus");
var para1El = document.getElementById("para1");

// toggle function: pass element as argument
function toggleMe(el) {
	 // check if element is hidden
   if(el.offsetParent === null) {
      plusMinusEl.textContent = "-";
      el.style.display = "block"
   }
   else {
      plusMinusEl.textContent = "+";
      el.style.display = "none"
   }
}

// click function for expand div
expandEl.addEventListener("click", function() {toggleMe(para1El)});

#expand {
  font-size:18px; 
  color:#008080;
  cursor: pointer;
  user-select: none;  /* stop div from highlighting */
}

#para1 {
  display: none;
}

<div id="expand">
LINK TO EXPAND <span id="plusMinus">+</span>
</div>
<p id="para1"><strong><em>text text text text</em></strong></p>

【讨论】：