Question

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>

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

Answer 1

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

相反，将html doc上的类更改为id＆＃39;然后直接在jQuery中引用它们。用这样的东西：

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

并使用id：

替换html doc中的类

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

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

试图模仿选择，但我很难

2 个答案: