javascript expand/collapse 文本 - 默认折叠

Question

我在 javascript 方面非常缺乏经验，但（在 google 的帮助下）设法将以下内容组合在一起 expandable/collapsible link

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

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

Answer 1

您可以尝试将显示选项放入样式语句中，如下所示：

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

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

Answer 2

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

Answer 3

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

Answer 4

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

在下面的示例中，我将您的代码包装在一个公共元素中，然后更改该元素的 class 以实现您想要的效果。这让我也可以轻松地添加您的加号和减号。

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

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>

Answer 5

我添加了一个解决方案，从您的 中删除了 javascript 和 css html。我还将您的 expand/collapse 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>

javascript expand/collapse 文本 - 默认折叠

javascript expand/collapse text - collapse on default

javascript

expand

if-statement

选项 1：

选项 2：