Question

我想使用此代码显示更多/显示更少的功能。为什么不起作用？这是index.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>

Answer 1

你有错误的选择器和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>

Answer 2

您需要添加

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

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

Answer 3

你必须对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();
    });
});

显示更多/显示更少javascript无法正常工作

3 个答案: