Question

我是jquery的新手。我有一个自定义的Accordion，我想在单击特定标题标题时为文本添加淡入效果。我尝试了很多不同的方法，但没有得到我想要的结果。

以下是我的手风琴代码：

HTML

  <div class="container">
  <!--Enter accordion here-->

  <ul id="cbp-ntaccordion" class="cbp-ntaccordion" style="margin-top: -92px; font-family: 'FUTURA MEDIUM'; font-weight: 300; line-height:1.5;">
  <li>
     <h3 class="cbp-nttrigger">ArtZone’s 10th Anniversary Art Exhibition 2015</h3>
     <div class="cbp-ntcontent bodytext">

           <div class="myannualcontent">
              <img src="images/Arts-House-Image.jpg" alt="" align="left" style=" margin-left: 2px;  width: 19%; margin-bottom: 20px; 
              margin-top: 20px; margin-right: 35px;"/>
              <p style="text-align: justify; padding-top: 20px; margin-left: 10px;">
                       Header text here <br /><br />
                       Join us once more as we delve into the world of our students’ creative journey express beautifully on paper. Under                            the guidance of our dedicated teachers, our students hereby present to you the fruits of their labour in their very                            distinctive way.  <br /><br />
              </p>
           <div>
      </div>
   </li>

</ul>

CSS

.cbp-ntaccordion > li > .cbp-nttrigger:before {
font-size: 75%;
}

.cbp-ntaccordion > li > .cbp-nttrigger:before {
content: "\36";
}
.cbp-ntaccordion > li > .cbp-nttrigger:hover:before {
content: "\35";
color: inherit;
}
.cbp-ntaccordion > li.cbp-ntopen > .cbp-nttrigger:before,
.no-js .cbp-ntaccordion > li > .cbp-nttrigger:before {
content: "\34";
color: inherit;
}

.cbp-ntsubaccordion > li > .cbp-nttrigger:before {
content: "\32";
}
.cbp-ntsubaccordion > li > .cbp-nttrigger:hover:before {
content: "\33";
color: inherit;
}
.cbp-ntsubaccordion > li.cbp-ntopen > .cbp-nttrigger:before,
.no-js .cbp-ntsubaccordion > li > .cbp-nttrigger:before {
content: "\31";
color: inherit;
}

/* Initial height is zero */
.cbp-ntaccordion .cbp-ntcontent {
height: 0;
overflow: hidden;
}

/* When its open, set height to auto */
.cbp-ntaccordion .cbp-ntopen > .cbp-ntcontent,
.cbp-ntsubaccordion .cbp-ntopen > .cbp-ntcontent,
.no-js .cbp-ntaccordion .cbp-ntcontent {

-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-ms-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
height: auto;
}

/* Example for media query */
@media screen and (max-width: 32em) { 

.cbp-ntaccordion {
    font-size: 70%;
}

}

的Javascript

<script>
        $( function() {
            /*
            - how to call the plugin:
            $( selector ).cbpNTAccordion( [options] );
            - destroy:
            $( selector ).cbpNTAccordion( 'destroy' );
            */
            $('#cbp-ntaccordion').cbpNTAccordion();


           // $("cbp-ntopen").click(function () {

               /** $("#cbp-ntcontent").fadeToggle("slow",   
           "linear").find(".close").on("click", function() {
                    $(this).parents("#cbp-ntcontent").fadeIn("slow");
                    return false;
                });
            }); **/

            /** on click on any of the titles then run this codes

           $("#cbp-ntaccordion").fadeToggle("slow", "linear").find(".close").on("click", function() {
                  $(this).parents("#cbp-ntaccordion").fadeOut("slow");
                   return false;
           });
           */

        } );


</script>

Answer 1

我完全不明白你的期望。但是假设你想要这个。如果没有告诉我你想要什么。

这是您的HTML

<h3 class="dofade">ArtZone’s 10th Anniversary Art Exhibition 2015</h3>
<p class="mefade" style="display:none;">This is what you want to show</p>

这是你的css 如果您在css文件中使用外部样式

 .mefade{
   display:none;
 }

这是您的javascript 如果您使用内部js

<script type="text/javascript">
 $(document).ready(function(){
  $(".dofade").click(function(){
     $(.mefade).fadeIn(3000);//3000 meant within this ms time it shows
  });
});
</script>

如果您使用外部js添加此代码

$(document).ready(function(){
      $(".dofade").click(function(){
         $(.mefade).fadeIn(3000);//3000 meant within this ms time it shows
      });
    });

在嵌套手风琴中添加淡入效果

1 个答案: