JS折叠菜单上的标头消失

header dissapears on js collapse menu

本文关键字：消失折叠菜单 JS 更新时间：2023-09-26

我有一个可折叠的菜单，它使用简单的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 -->

我会将 + 或 - 符号包装在一个范围中，然后只调用该范围的更改。

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

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

$content.slideToggle(500, function () {
    var currentText = $header.text();
    if ($content.is(":visible")) {
        currentText.replace(/'+{1}$/), '-');
    } else {
        currentText.replace(/'-{1}$/), '+');
    }
    $header.text(currentText);
});