Question

我正在使用下拉列表来获取其他一些内容。我不确定为什么但是下拉不能正常工作。点击“阅读更多”＆＃39;链接它带我回到我的主页或刷新到主页。我做了一个jsfiddle，并在那里做同样的事情。任何有关我做错的信息都将不胜感激。

＆＃13;

$('.expand-notice').on('click', function(e) {
    e.preventDefault();
    var parent = $(this.parentNode.parentNode);
    parent.toggleClass('open-notice');
    if (parent.hasClass('open-notice')) $(this).text('Less');
    else $(this).text('Read more');
  });

＆＃13;

.notice {
  background: #DDDDDD;
  max-width: 40em;
  margin: 0 auto 0.5em;
  padding: 1em;
  text-align: center;
  font-family: sans-serif;
  letter-spacing: 1px;
}
.notice p {
  margin: 0;
}
.notice-type,
.notice-title {
  font-family: sans-serif;
}
.notice-type {
  text-transform: uppercase;
  opacity: 0.8;
  font-size: 11px;
  letter-spacing: 2px;
}
.notice-title {
  font-size: 20px;
}
.notice-content {
  display: none;
  text-align: left;
  margin: 5px;
}
.notice-content p {
  letter-spacing: 0;
  padding: 5px;
}
.open-notice .notice-content {
  display: block;
}

.recent-news {
  margin: 0em auto;
  max-width: 80em;
  padding: 0 3% 2em;
  overflow: hidden;
  text-align: center;
}
.recent-news h2 {
  margin-top: 0.5em;
}

.news-item {
  display: inline-block;
  margin: 1.5em 0 0 0;
  width: 47.75%;
  background: #fff;
  padding: 2em 0em;
  text-align: center;
  vertical-align: top;
}
.news-item:nth-child(2n) {
  margin-left: 3%;
}
.news-item p {
  padding: 0em 1.5em;
  margin: 0em;
  line-height: 1.6;
}
.news-item p.news-date {
  font-size: 0.95em;
}

＆＃13;

<div class="page" data-subject-page="1">
  <div class="largeText" data-subject-text="">
    <div class="recent-news">
    <h1>main title</h1>
      <div class="notice">
      <p class="notice-type">Date</a>
      <p class="notice-title">sub title</p>
        <div class="notice-content">
        <p>Content here</p>
        </div>
        <p><a href="/" class="expand-notice">Read more</a></p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

从标记中删除 href 属性并将脚本包装到

$(document).ready()

请参阅fiddle

Answer 2

作为您的Javascript代码，它假设显示Content Here Less。好。您必须执行以下操作：

1-确保包含Jquery库

2-将Jquery代码放在结束</body>标记之前的脚本标记之间。

结帐This DEMO

如果您想将脚本放在head部分，则必须使用$document.ready(function(){// Your Code here});

下拉正在点击重新加载主页

2 个答案: