显示更多/显示更少Jquery代码工作小提琴但不在我的代码中

时间：2018-04-11 19:12:59

标签： javascript jquery

我正在尝试使用我在小提琴上找到的代码。

Original Fiddle Code Here

但是当我在我的网站上使用它时它不起作用。我找到了这个可能的解决方案

Code is Working on Fiddle but not on Website

但是它对我的情况不起作用，或者我错误地实现了它。我很新，所以不会让我感到惊讶。提前感谢您的帮助！

$(".show-more a").on("click", function() {
    var $this = $(this); 
    var $content = $this.parent().prev("div.content");
    var linkText = $this.text().toUpperCase();    
    
    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 100);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 100);
    };

    $this.text(linkText);
});
div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
    height: auto;
}

h1 {
    font-size: 24px;        
}
p {
    padding: 10px 0;
}
.show-more {
    padding: 10px 0;
    text-align: center;
}

td {
    width:200px;
    border: solid 1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
    <h1>Title goes here</h1>
    <h2>Subtitle</h2>
   
</div>

<table class="flat-table flat-table-1" width="100%">

<tr style="background-color:#FFF;">
    <td class="table-head">Name</td>
    <td class="table-head">Review</td>
    <td class="table-head">Rating</td>
</tr>
    
<tr>
    <td class="name">John Doe</td>
    <td class="review"> <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.
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div></td>
    <td class="rating">5</td>
</tr>
    <tr>
    <td class="name">John Doe</td>
    <td class="review"> <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.
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div></td>
    <td class="rating">5</td>
</tr>
    
</table>

2 个答案:

答案 0 :(得分：1)

你忘记了Jquery扩展。

enter image description here

正如您在图像中看到的那样，小提琴具有jquery以及jquery ui扩展名。您需要做的就是添加

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
导入JQuery后，在你的html中

。

这是一个工作片段：

$(".show-more a").on("click", function() {
    var $this = $(this); 
    var $content = $this.parent().prev("div.content");
    var linkText = $this.text().toUpperCase();    
    
    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 100);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 100);
    };

    $this.text(linkText);
});
div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
    height: auto;
}

h1 {
    font-size: 24px;        
}
p {
    padding: 10px 0;
}
.show-more {
    padding: 10px 0;
    text-align: center;
}

td {
    width:200px;
    border: solid 1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>
<div class="text-container">
    <h1>Title goes here</h1>
    <h2>Subtitle</h2>
   
</div>

<table class="flat-table flat-table-1" width="100%">

<tr style="background-color:#FFF;">
    <td class="table-head">Name</td>
    <td class="table-head">Review</td>
    <td class="table-head">Rating</td>
</tr>
    
<tr>
    <td class="name">John Doe</td>
    <td class="review"> <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.
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div></td>
    <td class="rating">5</td>
</tr>
    <tr>
    <td class="name">John Doe</td>
    <td class="review"> <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.
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div></td>
    <td class="rating">5</td>
</tr>
    
</table>

答案 1 :(得分：1)

switchClass（）方法仅在jQuery UI中可用，在jQuery中不存在。 jQuery UI 1.8.18包含在小提琴代码中，但在你的代码中缺失。 尝试包含在您的代码中。 

<script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

希望这有帮助。

相关问题
最新问题