试图模仿选择，但我失败了答案

【问题标题】：Trying to mimic select, but I am failing hard试图模仿选择，但我失败了
【发布时间】：2017-02-06 20:52:42
【问题描述】：

jQuery(document).ready(function (e) {
    function t(t) {
        e(t).bind("click", function (t) {
            t.preventDefault();
            e(this).parent().fadeOut()
        })
    }
    e(".dropdown-toggle").click(function () {
        var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
        e(".button-dropdown .dropdown-menu").hide();
        e(".button-dropdown .dropdown-toggle").removeClass("active");
        if (t) {
            e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active");
        }
    });
    e(document).bind("click", function (t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
    });
    e(document).bind("click", function (t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
    })
});

.button-dropdown {
    position: relative;
    top: 5px;
    width: 20%;
    line-height: 45px;
    color: #aaa;
    background: #f5f5f5;
    margin-left: -1px;
    text-align: center;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.dropdown-menu {
    display: none;
    position: absolute;
    left: 0px;
    text-align: center;
    margin-top: -1px;
    background-color: #85C0E5;
    list-style: none;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.dropdown-menu li {
    width: 255px;
    margin-left: -4px;
    line-height: 45px;
    color: #fff;
    border-top: 1px solid #ddd;
}
.dropdown-menu.active {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="button-dropdown sort">
    <p class="dropdown-toggle">Newest</p>
        <ul class="dropdown-menu">
            <li>Oldest</li>
            <li>Most Liked</li>
            <li>Most Read</li>
        </ul>
</li>

我希望不使用选择框来动态更改框的内容。为什么？因为我不知道如何使用选择框来实现这个结果。我根本无法按照我想要的方式设置下拉菜单的样式。

【问题讨论】：

不太清楚具体的问题或疑问是什么
现在我只有下拉菜单，但我还需要它作为一个选择框。意思是，当我按下下拉列表中的
之一时，顶部
的内容会改变。

【解决方案1】：

我会替换这些 e.(document).bind("click",function(){ )};

相反，将 html 文档中的类更改为 id，然后直接在 jQuery 中引用它们。像这样具体的东西：

$('#dropdown-toggle').bind("click",function(){
//add the event handling function
});

并用 id 替换 html 文档中的类：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li id="button-dropdown sort">
    <p id="dropdown-toggle">Newest</p>
        <ul id="dropdown-menu">
            <li>Oldest</li>
            <li>Most Liked</li>
            <li>Most Read</li>
        </ul>
</li>`

【讨论】：

【解决方案2】：

以下将存储每个选择的原始文本并切换所选文本以及允许更改选择

var selectedText = 'Clicked';// display when selected

$('.dropdown-menu li').click(function(){    

     var $li = $(this), txt = $li.data('text');
     // don't do anything if already selected
     if( $li.hasClass('selected') ){
        return;
     }

     // display selectedText  and add selected class 
     $li.text(selectedText ).addClass('selected').parent().prev().text(txt);

     //reset sibling that was previously selected
     $li.siblings('.selected').removeClass('selected').text(function(){
          return $(this).data('text')
     });


}).each(function(){
    // store original text for resets
    $(this).data('text', $(this).text() );
})

【讨论】：

我已将 'Clicked' 替换为 'Newest'，因为这是我的第一选择。但是现在，当我点击最旧的时，它会随着最新的变化而变化。没有什么不对。但是当我想再次选择最新的时，我不能。另外，每次，我都会选择一个新的
，它会用最新的替换它。 ://

将其放入 jsfiddle.net 或 plunker 或其他沙箱中的现场演示中。也不确定您想要的确切行为

jsfiddle.net/PCakirli/x14pz3uu/5 1. 我希望按钮在单击时将颜色切换为蓝色，并在悬停时更改颜色。 2.当你选择一个li时，它的内容应该和你点击的那个切换。现在，它只是用最新的替换它们，我不能再选择最新的了。感谢您的帮助：D

你使用我为样式添加的类。最好只是使用选定的类隐藏再次选择的那个

试试这个......刚刚将最新添加到列表中（带有选定的类）......并设置css隐藏选定的类jsfiddle.net/x14pz3uu/7