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

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

＆＃13;

$(".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") ? "-" : "+";
        });
    });

});

＆＃13;

.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;
}

＆＃13;

<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 -->

＆＃13;

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);
});

js折叠菜单上的标题消失

2 个答案: