javascript expand/collapse text - collapse on default

问题

I'm very inexperienced in javascript but have managed (with the help of google) to put together the following 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>

The only problem with it is that it is expanded by default and I wanted it collapsed by default. Can anyone help with this? Thank you! Also, if anyone knows how to get +/- signs next to the link that change depending on whether it is expanded or collapsed, that would be great.

回答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:

You can try putting in style statement the display option like below:

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

That can default collapse when you open your html, hope it help you...

回答3:

Options 1:

Add this to your css to hide it by default:

#para1 {
    display: none;
}

Options 2:

Move your script down, and call it initially toggleMe('para1'); so you will hide it first.

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

Daniel has the correct answer to your question. This is a bit more than you asked for, but I think you will have a better time if you manipulate classes instead of element styles properties. Just makes it a bit more flexible.

In the example below I wrapped your code in a common element and then changed that element's class to achieve your desired effect. That let me easily add in your plus and minus too.

It's a little raw but you can see where this can take you. Hope it helps.

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:

I added a solution that removes the javascript and css from your html. I also changed your expand/collapse element to a div instead of input. I've added a span element within the div that changes it's text content (either + or -) based on whether #para1 is displayed or not. Also, in css I added display: none; to #para1 (this initially hides the element), cursor: pointer; (shows it is clickable when the user hovers over it) user-select: none; (stop div from highlighting when user clicks on it).

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

来源：https://stackoverflow.com/questions/43896104/javascript-expand-collapse-text-collapse-on-default

标签

javascript

if-statement

expand