Question

在此代码中，在lioading期间仅显示第1部分。当点击更多然后部分html代码显示
但是以下Java脚本无法正常工作。如果任何人有解决方案请回答。

     <div class="box">
 <h2 > west delhi</h2>
 <span class=" first-paragraph teaser ">Part 1 </span>
 <span class="toggle" style="display: none;">  Part 2</span>
  <a href="javascript:void(0)" class="moreBtn" style="color:#ff0000;">more...</a>
</div> 






<script src="js/return_city_name.js"> document.readyState()</script>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider-min.js">   </script>
    <script type="text/javascript" src="js/select.min.js"></script>
    <script type="text/javascript" src="js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
     <script>
        $(document).ready(function () {
            $(".box .moreBtn").click(function () {
                $(this).parent('.box').find(".toggle").toggle(); 
                if($(this).parent('.box').find('.toggle').css('display')=='none'){
                    $(this).text('more');
                }else{
                    $(this).text('less');
                }
            });
        });
    </script>

Answer 1

您需要在代码中添加jQuery。

下载（http://jquery.com/download/）并在HTML主管部分中引用它：

<script src="jquery-1.12.0.min.js"></script>

或者使用其中一个CDN：

谷歌：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

微软：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>

Answer 2

它在这里工作

＆＃13;

$(document).ready(function() {
  $(".box .moreBtn").click(function() {
    $(this).parent('.box').find(".toggle").toggle();
    if ($(this).parent('.box').find('.toggle').css('display') == 'none') {
      $(this).text('more');
    } else {
      $(this).text('less');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <h2> west delhi</h2>
  <span class=" first-paragraph teaser ">Part 1 </span>
  <span class="toggle" style="display: none;">  Part 2</span>
  <a href="javascript:void(0)" class="moreBtn" style="color:#ff0000;">more...</a>
</div>

＆＃13;

这是你想要的吗？还是需要其他东西？

Java脚本代码不起作用

2 个答案: