Question

我创建了一个带有第二个导航菜单的网页，当点击该菜单时，向下滚动页面到相关部分。

在这些部分中，我有一个文本区域，可以通过单击来阅读更多按钮进行扩展。

我想要做的是实现一个功能，当点击导航链接（.toplinks＃section1）时，该功能将扩展此部分，这样它就可以自动扩展而无需单击read more按钮。< / p>

<li class="top-li-double">
<a class="toplinks" href="#section1">Section 1</a>
</li>
<br/>
<div id="slips" class="explain">
<h2 class="categoryhead">SECTION 1</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
<div class="wrapper">
<div class="small">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
</div> 
<div style="margin-top:5px">
<a class="readmoretext" href="#">Click to read more</a>
</div>
</div>
</div>

jQuery脚本：

$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read Less":"Click to read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

我在js小提琴中玩过这个游戏，请参阅fiddle 但没有运气。如果有人能给我一个正确的方向，我将非常感谢！

Answer 1

我已经重新编写了一些代码，你可以看到完整的工作示例here。

我添加了更多部分和链接，以便您可以看到它可以很好地扩展。

JS：

$('.readmoretext').on('click',function() {
    this.expand = !this.expand;
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    $(this).text(this.expand?"Read Less":"Click to read more");
})


$('a.toplinks').on('click', function (e) {
      var l = $(this).attr('href')
      $(l).find("a.readmoretext").click();
});

HTML：

<a class="toplinks" href="#section1">Section 1</a>
<div id="section1" class="explain">

我已将id添加到div.explain，以便它可以滚动到该元素。

基本上代码只是找到id是一个孩子并调用click事件

如何使用两个不同的链接扩展一个部分？

1 个答案: