Question

我有以下jQuery手风琴，我使用“+”和“ - ”图标。在这些图标旁边，您可以看到描述（在本例中为“Part1”和“Part2”）

jQuery的：

$(document).ready(function () {
    $(".accordion").accordion({
        collapsible: true,
        active: false,
        animate: 500
    }).on("click", "div", function (e) {
        $("div.ui-accordion-header").each(function (i, el) {
            if ($(this).is(".ui-state-active")) {
                $(this).find(".panel-icon").html("-")
            } else {
                $(this).find(".panel-icon").html("+")
            }
        })
    });
});

HTML：

<div class="accordion">
    <div class="js_button">
        <span class="panel-icon">+</span>Part1</div> 
    <div class="panel">
                <p>Content1</p>
                </div>

</div>
<div class="accordion">
    <div class="js_button"><span class="panel-icon">+</span>Part2</div> 
    <div class="panel">
                <p>Content2</p>
                </div>

</div>

CSS：

.accordion {
    float: left;
    line-height: 2.0;
    width: 100%;
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
     margin-top: 1%;
}
.js_button {
    width: 100%;
    padding-left: 1%;
    font-weight: bold;
    outline-width: 0;
    position: relative;
    box-sizing: border-box;
}
.js_button:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
}
.panel {
    width: 99%;
    height: 20%;
    padding-left: 1%;
    font-weight: bold;
    overflow: hidden;
}

当我点击按钮并且“+”图标变为“ - ”图标时，图标旁边的描述（第1部分，第2部分）以某种方式“跳转”到左侧，因为“ - ”图标似乎更小而不是“+”图标。如何避免这种情况并使图标旁边的描述保持在同一位置而根本不移动？

感谢您的帮助： - ）

Answer 1

您只需为跨度指定固定宽度即可。为了使它工作，你必须先浮动它。

span.panel-icon {
    float:left;
    width: 10px;
}

JSFiddle：http://jsfiddle.net/ypv8yow1/14/

跳转描述+/- icon jQuery Accordion旁边的描述

1 个答案: