6

機能するドロップダウン メニューを作成しましたが、それを使用してフィルターを選択したいと考えています。問題は、フィルター オプションを選択するとドロップダウンが消えることです。単語フィルターが選択されたときにのみ、メニューを表示して非表示にしたい。これを行うには、より多くのjavascriptが必要だと思います。方法がわかりません。事前にご協力いただきありがとうございます。

これが私のhtmlです：

<div id="vv" class="fill_box">
    Filters
    <div class="dropdown1">
        <div class="padding">
            <div class="type">
                <div class="typeTitle">
                    Type:
                </div>
                <div class="typeButton">
                    <div class="typeOne">
                        All
                    </div>
                    <div class="typeOne">
                        Local
                    </div>
                    <div class="typeOne">
                        Chain
                    </div>
                </div>
            </div>
            <div class="type">
                <div class="typeTitle">
                    Price:
                </div>
                <div class="typeButton">
                    <div class="priceOne">
                        $
                    </div>
                    <div class="priceOne">
                        $$
                    </div>
                    <div class="priceOne">
                        $$$
                    </div>
                    <div class="priceOne">
                        $$$$
                    </div>
                </div>
            </div>
            <div class="type">
                <div class="nowButton">
                    Open Now
                </div>
            </div>
            <div class="type">
                <div class="typeTitle">
                    Category 1:
                </div>
                <div class="categoryButton">
                    <input type="text">
                </div>
            </div>
        </div>
    </div>
</div>

CSS :

.fill_box {
    position: relative;  
    margin: 0 auto;
    background: #fff;s
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-align: center;
    background: #CC0000;
    border: 2px solid white;
    border-radius: 4px;
    padding: 5px 0;
    margin-top: 10px;
    font-size: 14px;
    width: 100px;
    color: white;
}
.fill_box .dropdown1 {
    overflow: hidden;
    margin: 0 auto;
    padding: 0px;
    background: white;
    border-radius: 0 0 0px 0px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-align: left;
    max-height: 0;
    background: #3d3d3d;
    width: 300px;
    color: white;
}

JavaScript:

function DropDown1(me) {
    this.dd = me;
    this.initEvents();
}

DropDown1.prototype = {
    initEvents : function() {
        var obj = this;
        obj.dd.on('click', function(event){
            $(this).toggleClass('active');

        }); 
    }
}

$(function() {
    var dd = new DropDown1( $('#vv') );
    $(document).click(function() {
        // all DropDown1s
        $('.fill_box').show('active');
    });
});
4

4 に答える 4

1

できることは複数ありますが、Javascript を無効にする人もいれば、デフォルトで無効になっている人もいるため、Javascript に依存しないことをお勧めします。

于 2013-11-13T06:45:58.347 に答える
1

これを試して：

http://jsfiddle.net/k73s8/1/

<div id="vv" class="fill_box">
    Filters
 </div>

$(function() {
    var dd = new DropDown1( $('#vv') );
    $(document).click(function() {
    // all DropDown1s
    $('.fill_box').show('active');
            $('.dropdown1').toggle();
    });
});

PS: 理由がわからないドキュメント全体でイベントをクリックしました...だから私も同じことをしました。私はそれが他の概念の一部であると推測しています。そうでない場合は、使用しないことをお勧めします。代わりに、id=vvdivでクリック イベントを使用します。

于 2013-11-13T04:11:34.080 に答える