Question

我目前正在学习jQuery，现在已经开始研究这个特定的事情了几天。我想要做的是在每个面板的右侧引入一个加号或减号图标，如：http://www.tutorialsmade.com/demo/accordion_script/ - 我似乎无法将其纳入我现在所拥有的内容中。我尝试过图像以及实际的+和 - 文字字符。任何帮助将非常感谢。

小提琴：http://jsfiddle.net/u3a9t9cb/

的jQuery

$(document).ready(function ($) {
        $('#accordion').find('.accordion-toggle').click(function () {
            //Expands or collapses clicked panel
            $(this).next().slideToggle('fast');
            //Hides any other expanded panels
            $(".accordion-content").not($(this).next()).slideUp('fast');
        });

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

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

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

HTML

<div id="accordion">
            <ul>
                <li class="accordion-toggle icon-airlines">Top Level 1</li>
                <ul class="accordion-content">
                    <li class="sub-accordion-toggle">Sub Level 1</li>
                    <li class="sub-accordion-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit quam odio, consequat pharetra felis lobortis egestas.</p>
                        <p>Phone: (800) 555-1212</p>
                    </li>
                    <li class="sub-accordion-toggle">Sub Level 2</li>
                    <li class="sub-accordion-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit quam odio, consequat pharetra felis lobortis egestas.</p>
                        <p>Phone: (800) 555-1212</p>
                    </li>
                </ul>
                <li class="accordion-toggle icon-restaurants">Top Level 2</li>
                <ul class="accordion-content">
                    <li class="sub-accordion-toggle">Sub Level 1</li>
                    <li class="sub-accordion-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit quam odio, consequat pharetra felis lobortis egestas.</p>
                        <p>Phone:(800) 555-1212</p>
                    </li>
                    <li class="sub-accordion-toggle">Sub Level 2</li>
                    <li class="sub-accordion-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit quam odio, consequat pharetra felis lobortis egestas.</p>
                        <p>Phone:(800) 555-1212</p>
                    </li>
                </ul>
            </ul>
    </div>

CSS

/* RESET */
    html, body, address, blockquote, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, li, ol, ul, table, tr, td, th, p, img {
        margin:0;
        padding:0;
    }
    img, fieldset {
        border:none;
    }
    /* START OF STYLES */
    #accordion {
        position:relative;
        margin:0 auto;
        width:522px;
        font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    .accordion-toggle {
        background-color:#0168b3;
        font-weight:normal;
        font-size:20px;
        color:#fff;
        line-height:100%;
        padding:16px 0 16px 48px;
    }
    .icon-airlines {
        background: url('../images/icon-ai.png') 8px 10px no-repeat;
        background-color:#0168b3;
    }
    .icon-restaurants {
        background: url('../images/icon-r.png') 8px 10px no-repeat;
        background-color:#0168b3;
    }
    .icon-shopping {
        background: url('../images/icon-s.png') 8px 10px no-repeat;
        background-color:#0168b3;
    }
    .icon-amenities {
        background: url('../images/icon-am.png') 8px 10px no-repeat;
        background-color:#0168b3;
    }
    .accordion-toggle:hover {
        background-color:#045c8f;
    }
    .status-plus {
        float:right;
        height:52px;
        width:52px;
        padding:0;
        content:"+";
        text-align:right;
        clear:both;
        display:none;
    }
    .status-minus {
        float:right;
        content:"-";
        text-align:right;
        clear:both;
    }
    .accordion-toggle {
        cursor: pointer;
        margin:0 0 1px 0;
    }
    .accordion-content {
        display: none;
    }
    .accordion-content.default {
        display: block;
    }
    .accordion-content {
        background:#02324d;
    }
    .sub-accordion-toggle {
        cursor: pointer;
        color:#fff;
        font-size:18px;
        font-weight:normal;
        line-height:100%;
        padding:10px 0 10px 20px;
    }
    .sub-accordion-toggle:hover {
        background:#02283e;
    }
    .sub-accordion-content {
        display: none;
    }
    .sub-accordion-content {
        background:#fff;
    }
    .sub-accordion-content p {
        color:#222222;
        font-size:16px;
        font-weight:normal;
        line-height:21px;
        padding:6px 12px;
    }
    .accordion-toggle, .sub-accordion-toggle, .sub-accordion-content {
        list-style-type:none;
    }

Answer 1

我为你的手风琴添加了一个课程，以反映他们的崩溃状态。根据切换的类，javascript会删除+对象上的-或clicked，并切换兄弟的图标。

Fiddle

//Expands or collapses clicked panel
if ($(this).hasClass('plus')) {
  // if this is closed
  if ($(this).siblings('li').hasClass('minus')) {
    $(this).siblings('li').removeClass('minus').addClass('plus');
  }
  $(this).removeClass('plus').addClass('minus').next().slideToggle('fast');
} else {
  if ($(this).siblings('li').hasClass('plus')) {
    $(this).siblings('li').removeClass('minus').addClass('plus');
  }
  $(this).removeClass('minus').addClass('plus').next().slideToggle('fast');
}

.accordion-toggle.plus:before {
    content: "+ ";
}
.accordion-toggle.minus:before {
    content: "- ";
}

jQuery手风琴的最小加减脚本

1 个答案:

Fiddle