header 在 js 折叠菜单上消失

Question

我有一个可折叠菜单，它使用简单的 js 并且效果很好，但是当您单击它时 header 消失了。 js 适用于两个菜单很容易，但如果我尝试更改 js 中的文本以使其出现，那么它会更改两个下拉菜单的文本。基本上，我如何做到只更改“+”和“-”而不更改 "champion" "hanes" 文本？我也尝试将 "Champion" 放在跨度之外，但它仍然改变了，因为它在 header 中，我不知道如何更改 js 以仅更改跨度而不是整个 header.

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "-" : "+";
        });
    });

});

.collapsemenu {
    width:100%;
    margin-bottom: 15px;
}
.collapsemenu div {
    width:100%;
}
.collapsemenu .header {
    background-color: #0FBAC1;
    padding: 2px;
    cursor: pointer;
    color: white;
    border-radius: 8px;
    font-size: 1.2em;
    padding-left: 5px;
}
.collapsemenu .content {
    display: none;
    padding : 5px;
}
.collapsemenu .content ul {
 list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="collapsemenu">
    <div class="header">
      <span>Champion +</span>
    </div><!-- /header -->
    <div class="content">
        <ul>
            <li><a href="">T-Shirts</a></li>
            <li><a href="">Tanks</a></li>
            <li><a href="">Polos</a></li>
            <li><a href="">Long Sleeve</a></li>
            <li><a href="">Hoodies</a></li>
            <li><a href="">Sweats</a></li>
            <li><a href="">Youth</a></li>
        </ul>
    </div><!-- /content -->
</div><!-- /collapsemenu -->

<div class="collapsemenu">
    <div class="header">
      <span>Hanes +</span>
    </div><!-- /header -->
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div><!-- /content -->
</div><!-- /collapsemenu -->

Answer 1

您正在擦除元素的文本。将您的 slideToggle 更改为：

$content.slideToggle(500, function () {
    var currentText = $header.text();

    if ($content.is(":visible")) {
        currentText.replace(/\+{1}$/), '-');
    } else {
        currentText.replace(/\-{1}$/), '+');
    }

    $header.text(currentText);
});

Answer 2

我会将 + 或 - 符号包裹在一个跨度中，然后只调用该跨度上的更改。

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $sign = $header.children(".sign");
        $sign.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "-" : "+";
        });
    });

});

.collapsemenu {
    width:100%;
    margin-bottom: 15px;
}
.collapsemenu div {
    width:100%;
}
.collapsemenu .header {
    background-color: #0FBAC1;
    padding: 2px;
    cursor: pointer;
    color: white;
    border-radius: 8px;
    font-size: 1.2em;
    padding-left: 5px;
}
.collapsemenu .content {
    display: none;
    padding : 5px;
}
.collapsemenu .content ul {
 list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="collapsemenu">
    <div class="header">
      Champion <span class="sign">+</span>
    </div><!-- /header -->
    <div class="content">
        <ul>
            <li><a href="">T-Shirts</a></li>
            <li><a href="">Tanks</a></li>
            <li><a href="">Polos</a></li>
            <li><a href="">Long Sleeve</a></li>
            <li><a href="">Hoodies</a></li>
            <li><a href="">Sweats</a></li>
            <li><a href="">Youth</a></li>
        </ul>
    </div><!-- /content -->
</div><!-- /collapsemenu -->

<div class="collapsemenu">
    <div class="header">
      Hanes <span class="sign">+</span>
    </div><!-- /header -->
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div><!-- /content -->
</div><!-- /collapsemenu -->

header 在 js 折叠菜单上消失

header dissapears on js collapse menu

javascript

menu

collapse