显示更多/显示更少javascript不工作_Javascript_Jquery_Html

显示更多/显示更少javascript不工作

javascript jquery html

显示更多/显示更少javascript不工作,javascript,jquery,html,Javascript,Jquery,Html,我想将此代码用于show more/show less函数。为什么它不起作用？这里是index.html $（文档）.ready（函数（）{ setTimeout（函数（）{ $（'.more'）。单击（）；//这将触发警报 },10); $（“.show more button”）。在（“单击”，函数（）上）{ var$this=$（this）； var$content=$this.parent（）.prev（“div.content”）； var linkText=$this.text（）

我想将此代码用于show more/show less函数。为什么它不起作用？这里是index.html

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.more'）。单击（）；//这将触发警报
},10);
$（“.show more button”）。在（“单击”，函数（）上）{
var$this=$（this）；
var$content=$this.parent（）.prev（“div.content”）；
var linkText=$this.text（）.toUpperCase（）；
如果（linkText==“显示更多”）{
linkText=“显示较少”；
$content.switchClass（“hideContent”，“showContent”，400）；
}否则{
linkText=“显示更多”；
$content.switchClass（“showContent”，“hideContent”，400）；
};
$this.text（linkText）；
});
});
div.text-container{
保证金：0自动；
宽度：75%；
}
.隐藏的{
溢出：隐藏；
线高：1米；
高度：2米；
}
.展示内容{
线高：1米；
高度：自动；
}
.展示内容{
高度：自动；
}
h1{
字体大小：24px；
}
p{
填充：10px0；
}
.展示更多{
填充：10px0；
文本对齐：居中；
}

他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。
更多的文字

更多的文字
更多的文字
更多的文字

显示更多
选择器和swichtclass错误，请将其更改为$（“.content”）。toggleClass
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.more'）。单击（）；//这将触发警报
},10);
$（“.show more button”）。在（“单击”，函数（）上）{
var$this=$（this）；
var$content=$this.parent（）.prev（“div.content”）；
var linkText=$this.text（）
如果（linkText==“显示更多”）{
linkText=“显示较少”；
$（“.content”）.toggleClass（“hideContent”，“showContent”，400）；
}否则{
linkText=“显示更多”；
$（“.content”）.toggleClass（“showContent”，“hideContent”，400）；
};
$this.text（linkText）；
});
});
div.text-container{
保证金：0自动；
宽度：75%；
}
.隐藏的{
溢出：隐藏；
线高：1米；
高度：2米；
}
.展示内容{
线高：1米；
高度：自动；
}
.展示内容{
高度：自动；
}
h1{
字体大小：24px；
}
p{
填充：10px0；
}
.展示更多{
填充：10px0；
文本对齐：居中；
}

他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。
更多的文字

更多的文字
更多的文字
更多的文字

显示更多
您需要添加
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



请参阅此链接：
您必须对html结构进行一些更改
<html>
 <head>
  <link href="style.css" rel="stylesheet">
  <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
   </script>
  </head>
<body>
<script type="text/javascrpit" src="js/test.js"></script>
<div class="text-container">
 <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    <div class="show-this-extra">
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>    
        <button class="show-less">Show less</button>
    </div>      
  </div>
  <button class="show-more">Show more</button>
</div>

switchClass（）不是jquery的一部分，要使用它，您必须使用jqueryUIJSFIDLE自动添加html、head和body标记。您的代码与它冲突，因此您的代码不起作用。我也在自己的文件中尝试了它，并且使用了来自的jQueryUI，但它仍然不起作用。
$(document).ready(function(){
    $(".show-this-extra").hide();
    $(".show-more").on("click",function(){
        $(".show-this-extra").show();
        $(".show-more").hide();
    });
    $(".show-less").on("click",function(){
        $(".show-this-extra").hide();
        $(".show-more").show();
    });
});