我想使用Jquery切换来执行Show More / Less属性。但是我的点击功能不起作用。我该如何解决?这是我的以下代码。

 <style>
    .morecontent span {
        display: none;
    }
</style>
<script>
    $(document).ready(function() {
        // Configure/customize these variables.
        var showChar = 100;  // How many characters are shown by default
        var ellipsestext = "...";

        $('#seo-content').each(function() {
            var content = $(this).html();
            if(content.length > showChar) {
                var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);
                var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h +
                '</span></span>';
                $(this).html(html);
            }
         });

        $("#seo-header").click(function(){
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
         });
    });
</script>
<body>
<div id="seo-header">Click for More</div>
<div id="seo-content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

最佳答案

如果您只希望seo-header类的每个元素切换到seo-content类的下一个元素,则可以使用

请注意,这会将您的ID更改为类,这使您可以将行为赋予许多元素,而不仅仅是一个



$(document).ready(function() {
       $('.seo-header').click(function(){

             $(this).next('.seo-content').toggle();

         });


    });

.morecontent {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seo-header">Click for More</div>
<div class="seo-content morecontent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="seo-header">Click for More</div>
<div class="seo-content morecontent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="seo-header">Click for More</div>
<div class="seo-content morecontent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="seo-header">Click for More</div>
<div class="seo-content morecontent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="seo-header">Click for More</div>
<div class="seo-content morecontent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

关于javascript - jQuery显示更多/更少示例,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27768355/

10-12 12:58
查看更多