Question

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

唯一的问题是默认情况下它会被展开，我希望它默认会折叠。有人能帮忙吗？谢谢！此外，如果有人知道如何在链接旁边获得+/-符号，这些符号会根据是展开还是折叠而发生变化，那就太棒了。

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

＆＃13;

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

＆＃13;

Answer 4

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

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

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

https://jsfiddle.net/6xoe1b94/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

javascript展开/折叠文字 - 默认情况下折叠

5 个答案:

选项1：

选项2：