Why does my Content Editor WebPart (CEWP) work in a page in Edit mode, but not in published mode? [duplicate]

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/275035

Вопрос

I recently added a Content Editor Webpart with code for an accordion. When I'm using it in on the page in edit mode, there are no issues. For reference, the end of the URL looks like this: /sites/JI/SitePages/Home.aspx

But when I go to the published page (URL like this: /sites/JI/_layouts/15/start.aspx#/SitePages/Home.aspx), the accordion no longer works. The color still changes when I hover over sections, but clicking has no effect.

Here's a stripped copy of the HTML:

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<h2>Header</h2>
<p>Lorem ipsum dolor sit</p>
<button class="accordion" type="button">JI Purchasing Instructions</button>
<div class="panel">
  <p><a href="linkhere">link name</a>Lorem ipsum dolor sit</p>
</div>

<button class="accordion" type="button">Button Name</button>
<div class="panel">
  <p> <ul>
   <li><a href="link"> linkname</a></li>
   <li><a href="link"> Link Name</a></li>
   <li><a href="link"> Linkname</a></li>
</ul> </p>
</div>

<button class="accordion" type="button">Buttonname</button>
<div class="panel">
  <p>Lorem ipsum dolor sit
    <ul> 
    <li><a href="Link"> Linkname</a></li>
    <li>Link to <a href="link"> linkname</a>
  </p>
</div>

<button class="accordion" type="button">button name</button>
<div class="panel">
  <p> <ul>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link name</a></li>
</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>
Это было полезно?

Решение

As Dylan Cristy mentioned in the comments, the issue ended up being MDS (Minimal Download Strategy). As soon as I disabled that, the accordion started working.

Другие советы

The html and script that you put in a Content Editor Web Part is being embedded on a containing page, and thus your content should not include a <DocType>, <Body>, or <Head> elements. Try using the following: 

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

<h2>Header</h2>
<p>Lorem ipsum dolor sit</p>
<button class="accordion" type="button">JI Purchasing Instructions</button>
<div class="panel">
  <p><a href="linkhere">link name</a>Lorem ipsum dolor sit</p>
</div>

<button class="accordion" type="button">Button Name</button>
<div class="panel">
  <p> <ul>
   <li><a href="link"> linkname</a></li>
   <li><a href="link"> Link Name</a></li>
   <li><a href="link"> Linkname</a></li>
</ul> </p>
</div>

<button class="accordion" type="button">Buttonname</button>
<div class="panel">
  <p>Lorem ipsum dolor sit
    <ul> 
    <li><a href="Link"> Linkname</a></li>
    <li>Link to <a href="link"> linkname</a>
  </p>
</div>

<button class="accordion" type="button">button name</button>
<div class="panel">
  <p> <ul>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link Name</a></li>
    <li><a href="link"> Link name</a></li>
</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с sharepoint.stackexchange
scroll top