Question

我有一个带开关箭头的下拉按钮。该按钮的默认文本是＆＃34;关闭＆＃34;当点击按钮时，应该打开它，它应该改变它的内容（从＆＃34;关闭＆＃34;到＆＃34;打开＆＃34;）和箭头。所有这些都发生在我点击按钮但是当我点击按钮并且其文本变为＆＃34;打开＆＃34;然后，如果我点击页面中的空白区域，它就会开始更改我的按钮文本，就像默认文本是＆＃34;打开＆＃34;。如何使我的按钮的默认文本始终保持＆＃34;关闭＆＃ 34;如果我点击一次按钮后点击页面中的空白区域？

这是我的代码

<div class="btn-group main_button_group">
<button type="button" class="btn btn-default dropdown-toggle main_btn" data-toggle="dropdown">
Closed
<span class="arrow_close"></span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">item 1</a>
    </li>
    <li><a href="#">item2</a>
    </li>
</ul>

CSS

.main_btn {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    font-size: 16px;
    padding: 10px 55px 10px 24px;
    top:31px;
    right:-20px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    border:0 none;
}
.main_btn .arrow_close {
    background-image: url("../arrow_close.png");
    background-repeat: no-repeat;
    width: 10px;
    height: 22px;
    display: inline-block;
    position: absolute;
    right:25px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}
.main_btn .arrow_open {
    background-image: url("../arrow_open.png");
    background-repeat: no-repeat;
    width: 10px;
    height: 22px;
    display: inline-block;
    position: absolute;
    right:25px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

jquery的

$(document).ready(function () {
    $("main_button_group button").click(function () {
        if ($(this).find('span').hasClass("arrow_close")) {
            $(this).find('span').addClass("arrow_open").removeClass("arrow_close");
        } else {
            $(this).find('span').addClass("arrow_close").removeClass("arrow_open");
        }

        var myspan = $(this).find('span');
        $(this).text(function (i, text) {
            return text === "Opened" ? "Closed" : "Opened";
        });
        $(this).append(myspan);
    });
});

如何使下拉按钮默认文本保持不变？

0 个答案: