Question

我在发布新闻文章的网站上创建了一个部分，但每个部分都有一个＆＃34;阅读更多＆＃34;按钮打开文章的其余部分，而不是一次性全部加载。这是我的代码......

HTML

<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>

的jQuery

$('.read-toggle').click(function(){
        if($('.continue-article').hasClass('show')){
            $('.continue-article').removeClass('show');
            $(this).children('span').text('Read More');
            $(this).children('.fa').removeClass('fa-caret-up').addClass('fa-caret-down');
        }else{
            $('.continue-article').addClass('show');
            $(this).children('span').text('Close');
            $(this).children('.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
        }
    });

CSS

.continue-article {display: none;}
.show {display: block;}
.read-toggle {font-weight: bold;}
    .read-toggle:hover {cursor: pointer;}

我遇到的问题是，当一个人被点击时，他们都会打开，当我只想要那个特别的＆＃34;阅读更多＆＃34;点击后可见。

如何设置它以便只显示已更改的那个而不是全部？

Answer 1

它会打开你所有的“阅读更多”，因为在JS中你选择了所有$('.continue-article')元素。

您只需选择前一个。

$('.read-toggle').click(function() {
    if($(this).prev('.continue-article').hasClass('show')) {
        $(this).prev('.continue-article').removeClass('show');
        $(this).children('span').text('Read More');
        $(this).children('.fa').removeClass('fa-caret-up').addClass('fa-caret-down');
        
    } else {
        $(this).prev('.continue-article').addClass('show');
        $(this).children('span').text('Close');
        $(this).children('.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
        }
});

.continue-article {display: none;}
.show {display: block;}
.read-toggle {font-weight: bold;}
    .read-toggle:hover {cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
<h1>Title</h1>
    <p>Author</p>
    <p>Visible Content</p>
    <div class="continue-article">
       <p>Hidden Content</p>
    </div>
    <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>

Answer 2

现在，您选择所有.read-toggle元素并显示或隐藏所有.continue-article。您需要的是在.continue-article点击上定位相应的.read-toggle。

更好的方法是将文章的内容包装在article标记中，并使用此常用父级来定位预期的切换。这样，您就不依赖于元素放置在article容器中的顺序。只是因为他们在里面。

<!-- Wrap articles in article tags  -->
    <article class="entry">
      <h1>Title</h1>
      <p>Author</p>
      <p>Visible Content</p>
      <div class="continue-article">
         <p>Hidden Content</p>
      </div>
      <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
    </article>

    <article class="entry">
      <h1>Title</h1>
      <p>Author</p>
      <p>Visible Content</p>
      <div class="continue-article">
         <p>Hidden Content</p>
      </div>
      <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>      
    </article>

    <article class="entry">
      <h1>Title</h1>
      <p>Author</p>
      <p>Visible Content</p>
      <div class="continue-article">
         <p>Hidden Content</p>
      </div>
      <p class="read-toggle"><span>Read More</span> <i class="fa fa-caret-down" aria-hidden="true"></i></p>
    </article>

JS：

$('.read-toggle').click(function(){
        var $curToggle = $(this),
            // Use the article wrapper to find intended .continue-article
            $curEntry = $curToggle.parent('.entry'),
            $curContinueArticle = $curEntry.find('.continue-article');

        if($curContinueArticle.hasClass('show')){
            $curContinueArticle.removeClass('show');
            $curToggle.children('span').text('Read More');
            $curToggle.children('.fa').removeClass('fa-caret-up').addClass('fa-caret-down');
        }else{
            $curContinueArticle.addClass('show');
            $curToggle.children('span').text('Close');
            $curToggle.children('.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
        }
});

这是plunkr

如何添加阅读更多点击事件才能打开一篇新闻文章？

2 个答案: