Question

我想使用Jquery切换来显示更多/更少属性。但我的点击功能不起作用。我该如何解决？以下是我的代码。

 <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>

Answer 1

如果您只是希望每个元素都使用类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>

JQuery显示更多/更少示例

1 个答案: