javascript - 在嵌套 Accordion 中添加淡入效果

Question

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

这是我的 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
      });
    });