显示更多/显示更少 JavaScript 不起作用

我想用这段代码来显示更多/显示更少的函数。为什么它不起作用？这是索引.html

    $(document).ready(function() {
        setTimeout(function() {
            $('.more').click(); // this will trigger the alert
        },10);
        $(".show-more button").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", 400);
            } else {
                linkText = "Show more";
                $content.switchClass("showContent", "hideContent", 400);
            };
    
            $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;
    }

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.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.
    					<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">
    					<button>Show more</button>
    				</div>
    			</div>

你有错误的选择器和swichtclass，将其更改为$(".content").toggleClass

$(document).ready(function() {
    setTimeout(function() {
        $('.more').click(); // this will trigger the alert
    },10);
    $(".show-more button").on("click", function() {
        var $this = $(this);
        var $content = $this.parent().prev("div.content");
        var linkText = $this.text()
        if(linkText === "show-more"){
            linkText = "Show less";
            $(".content").toggleClass("hideContent", "showContent", 400);
        } else {
            linkText = "Show more";
            $(".content").toggleClass("showContent", "hideContent", 400);
        };
        $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;
}

<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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.
                    <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">
                    <button>Show more</button>
                </div>
            </div>
</body>
</html>

你需要添加

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

请参阅此链接： http://jsfiddle.net/Wpn94/2131/

你必须对 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>

编辑您的测试 js

$(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();
    });
});

相关内容

最新更新

热门标签：