-1

jqueryを使用してドロップダウンボックスを表示しようとしています。それはうまく機能しています。リストを開いた後、ページの他の位置をクリックしたときにドロップダウンリストを非表示にするオプションも実装しました。そのために次のjQueryを使用しました。

$('div.selectBox').each(function(){
    $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
    $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
    $(this).children('span.selected,span.selectArrow').click(function(){
        if($(this).parent().children('div.selectOptions').css('display') == 'none'){
            $(this).parent().children('div.selectOptions').css('display','block');
        }
        else
        {
            $(this).parent().children('div.selectOptions').css('display','none');
        }
    });
    $(document).unbind('click');
    $(document).click(function(event){
        if($(event.target).closest('div.selectBox').length == 0) {
             $('.selectOptions').hide();                
        }
    });
    $(this).find('span.selectOption').click(function(){
        $(this).parent().css('display','none');
        $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
        $(this).parent().siblings('span.selected').html($(this).html());
    });
});

サイトの他の部分をクリックすると、完全に閉じたり非表示になったりします。ただし、問題は、他の<div>タグが非表示になっている、またはdisplay:none;この操作を実行した後に発生することです。

これに対する解決策を教えてください。上記のURLで完全に影響していることがわかります。その他の情報が必要な場合はお知らせください。

4

2 に答える 2

4 
$(this).toggleClass('open').next().toggle();

コード全体に散らばっているさまざまな場所のこの行が問題の原因になっているようです。それが本来何を達成することを意図していたのかわかりません。それは、それが何を意図していたかに応じて、修正するか、または完全に削除する必要があるかもしれません。

編集

jsFiddleで遊んだ後、ネストされた子要素を切り替えることが目的であり、正しく機能するように変更する必要があることが$(this).toggleClass('open');わかります。

于 2012-09-17T16:04:31.550 に答える
2

jsFiddle

2つを一度に開かずに2番目のメニューを含む他の使用法のいくつかを反映するために2012年9月21日更新

簡単に言うと、他のすべての作業は含まれていませんが、BASE機能の場合、必要なのは次のとおりです。

$(function() {
    // This will ensure it closes when clicked anywhere not on the element or its children
    $(document).click(function(e) {
        $(".open").removeClass("open");
    });

// the simple task of adding class
$(".createNew, .username, .notes").click(function(e) {
    var $this = $(this);
    // This next line ensures not having 2 open at once
    $(".open").filter(function(i){ return $this[0] != $(this)[0]; }).removeClass("open");
    e.stopPropagation(); // this prevents it closing via document.click
    $this.toggleClass("open");
});
});

difクラス名の複数の要素で使用したい場合：

$(function() {
    $(document).click(function(e) {
        $(".createNew, .username, .notes").removeClass("open");
    });

    // the simple task of adding class
    $(".createNew, .username, .notes").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });

    // the rest
    $(".textbox").css({width:'100px', height: '33px'})
        .focus(function(e) {
            $(this).animate({width: '200px', height: '33px'});
        })
        .blur(function(e) {
            $(this).animate({width: '100px', height: '33px'});
        });
});
于 2012-09-17T16:01:49.413 に答える