标题在js折叠菜单上消失

Question

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

$(".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

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

$(".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 -->

Answer 2

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

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

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

    $header.text(currentText);
});