Question

我尝试在HTML页面上实现下面的架构（img），但未成功。这就是为什么我呼吁您寻求帮助。图片中有关我想要您的更多信息。

下面的代码有效，但是如果您只按一次按钮两次。例如： ►如果，我单击阅读更多1，则显示text1。 ►如果，我点击Read more2，它将显示text2（我的text1仍然存在） ►如果，我单击一次Read 2，它将保留text2并删除text1。 ►如果，我单击“阅读更多1”，则显示text1 如果我再按一次Read more 1，它将删除text2。

<style>
#myList p{
  display:none;
}
#loadMore {
 cursor:pointer;
 color:#FFFFFF; 
 background-color:#8BAAD6; 
 border-color:#8BAAD6;
 margin:10px 0 0 0;
}
#loadMore:hover
#showLessa:hover
#showLess:hover
 {
 color:black;
}
#showLess {
 cursor:pointer;
 color:#FFFFFF; 
 background-color:#8BAAD6; 
 border-color:#8BAAD6;
 margin:10px 0 0 0;
}

#myList2 p{
  display:none;
}
#loadMore2 {
 cursor:pointer;
 color:#FFFFFF; 
 background-color:#8BAAD6;
 border-color:#8BAAD6;
 margin:10px 0 0 0;
}
#loadMore2:hover
#showLess2a:hover
#showLess2:hover
 {
 color:black;
}
#showLess2 {
 cursor:pointer;
 color:#FFFFFF; 
 background-color:#8BAAD6; 
 border-color:#8BAAD6;
 margin:10px 0 0 0;
}

</style>

<script
 src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
 integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
 crossorigin="anonymous">
 </script>
 
 
<script>
 
$(document).ready(function () {
 size_p = $("#myList p").length;
 x=0;
 $('#myList p:lt('+x+')').show();
 $('#loadMore').click(function () {
 x= (x+3 <= size_p) ? x+3 : size_p;
$('#myList p:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-3<0) ? 3 : x-3;
$('#myList p').not(':lt('+x+')').hide();
});
 
});
 
</script>


<script>
 
$(document).ready(function () {
 size_p2 = $("#myList2 p").length;
 y=0;
 $('#myList2 p:lt('+y+')').show();
 $('#loadMore2').click(function () {
 y= (y+3 <= size_p2) ? y+3 : size_p2;
$('#myList2 p:lt('+y+')').show();
});
$('#showLess2').click(function () {
y=(y-3<0) ? 3 : y-3;
$('#myList2 p').not(':lt('+y+')').hide();
});
 
});
 
</script>

<div class="content">
<section>
    
    <div id="loadMore" ><div id="showLess2">Read more 1</div></div>
    
    <div id="showLess"> <div id="loadMore2">Read more 2</div></div>
    
</section>

<section>
    
    <div id="myList">
        <h6>Depression</h6>
        
        <p>
            [TEXT 1] This text need to be showed if Read more 1 button is pressed or hide if Read more 2 button is pressed
        </p>
                    
    </div>
    
    <div id="myList2">
        <h6>Anxiety</h6>
        
        <p>
            [TEXT 2] This text need to be showed if Read more 2 button is pressed or hide if Read more 1 button is pressed
        </p>
        
    </div>
    
</section>

</div>

Answer 1

尝试一下：

$(document).ready(function() {
  // Initailly, we show all text in #myList and hide all text in #myList2
  // until the following script is executed

  // when click on ID load more, we hide div id #myList;
  // while showing div id #myList2
  $('#loadMore').on('click', function() {
    $('#myList').show();
    $('#myList2').hide();
  });

  // In constrast, when click on ID show less, we hide div id #myList2;
  // while showing div id #myList
  $('#showLess').on('click', function() {
    $('#myList2').show();
    $('#myList').hide();
  });
})

#myList2 {
  display: none;
}

#loadMore {
  cursor: pointer;
  color: #FFFFFF;
  background-color: #8BAAD6;
  border-color: #8BAAD6;
  margin: 10px 0 0 0;
}

#loadMore:hover #showLessa:hover #showLess:hover {
  color: black;
}

#showLess {
  cursor: pointer;
  color: #FFFFFF;
  background-color: #8BAAD6;
  border-color: #8BAAD6;
  margin: 10px 0 0 0;
}

#loadMore2 {
  cursor: pointer;
  color: #FFFFFF;
  background-color: #8BAAD6;
  border-color: #8BAAD6;
  margin: 10px 0 0 0;
}

#loadMore2:hover #showLess2a:hover #showLess2:hover {
  color: black;
}

#showLess2 {
  cursor: pointer;
  color: #FFFFFF;
  background-color: #8BAAD6;
  border-color: #8BAAD6;
  margin: 10px 0 0 0;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div class="content">
  <section>

    <div id="loadMore">
      <div id="showLess2">Read more 1</div>
    </div>

    <div id="showLess">
      <div id="loadMore2">Read more 2</div>
    </div>

  </section>

  <section>

    <div id="myList">
      <h6>Depression</h6>

      <p>
        [TEXT 1] This text need to be showed if Read more 1 button is pressed or hide if Read more 2 button is pressed
      </p>

    </div>

    <div id="myList2">
      <h6>Anxiety</h6>

      <p>
        [TEXT 2] This text need to be showed if Read more 2 button is pressed or hide if Read more 1 button is pressed
      </p>

    </div>

  </section>

</div>

这可能不是最佳解决方案，但希望这能解决您的问题。请阅读我在代码段中的注释，并了解更多信息，请参阅jQuery中的show/hide。让我知道您的反馈。谢谢

Loadmore //高级“无显示”按钮

1 个答案: