Question

我在网上找到了一个幻灯片切换手风琴内容div的教程。唯一的问题是，我希望+ +显示在非活动标签上，以及 - 显示在活动标签上

<div id="accordion">

  <h4 class="accordion-toggle">Accordion 1</h4>
  <div class="accordion-content default">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>


  <h4 class="accordion-toggle">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>

  <h4 class="accordion-toggle">Accordion 3</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>

    <h4 class="accordion-toggle">Accordion 4</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>

    <h4 class="accordion-toggle">Accordion 5</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>


    <h4 class="accordion-toggle">Accordion 6</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>


</div>



$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {

        //Expand or collapse this panel
        $(this).next().slideToggle('slow');

        //Hide the other panels
        $(".accordion-content").not($(this).next()).slideUp('slow');




    });
});



h4 {

font-size:25px;
font-weight:bold;

margin-left:4%;
color:#000000;
}

.accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}

http://jsfiddle.net/cjn4okkd/

Answer 1

替换你的javascript＆amp; jquery由此：

$(document).ready(function ($) {
checkActive();
$('#accordion').find('.accordion-toggle').click(function () {

    if ($(this).find('b').text() == '+ ') {
        //Hide the other panels
        $(".accordion-content").slideUp('slow',function() {
            $(this).prev().find('b').text('- '); 
        });
    }
    else {
    //Expand or collapse this panel
       $(this).next().slideToggle('slow',function() {
            $(this).prev().find('b').text('+ '); 
        }); 

    //Hide the other panels
        $(".accordion-content").not($(this).next()).slideUp('slow',function() {
            $(this).prev().find('b').text('- '); 
        });
    }
});
});

function checkActive() {
 $('.accordion-toggle').each(function (index, element) {
 if ($(element).next().css('display') == 'block') {
     $(element).html('<b>+ </b>' + $(element).text());
 }
 else {
     $(element).html('<b>- </b>' + $(element).text());
 }
});   
}

http://jsfiddle.net/eayx/oeb5d2xx/

此脚本将b选项卡替换为标题，并在b标记上添加+和 - 。

Jquery幻灯片切换

1 个答案: