2

いくつかの div を折りたたんで、ユーザーが展開してラジオ/チェックボックスを選択できるようにします。このコードと単純な jquery スクリプトがあります。問題は、チェックされたラジオ ボタンの動作が、その親 div の onclick ハンドラによって壊れていることです。どうすれば修正できますか？ 

    <div class="tree">
        <div class="parent">Item
           <div class="parent">ParentItem
              <div>
                 <input type="radio" name="_gen" value="a"></input>LeafItem a
              </div>
              <div>
                 <input type="radio" name="_gen" value="b"></input>LeafItem b
              </div>
         </div>
        </div>
     </div>
     <script type="text/javascript">
                $(function() {
                $('div.tree div:has(div)').addClass('parent'); 
                $('div.tree div').click(function() {
                    var o = $(this);
                    o.children('div').toggle();
                    o.children($(':radio')).attr('checked', true);
                    o.filter('.parent').toggleClass('expanded');
                    return false;
                    });
                });
            </script>
4

2 に答える 2

3

ここで何をしようとしているのかよくわかりませんが、入力での伝播を停止すると、クリックがより高い要素に登録されるという問題が解決されます。

$(function() {
    $('div.tree div:has(div)').addClass('parent');
    $('div.tree div').click(function() {
        var o = $(this);
        o.children('div').toggle();
        o.children($(':radio')).attr('checked', true);
        o.filter('.parent').toggleClass('expanded');
        return false;
    });
    $('input[type="radio"]').on('click', function(e) {
        e.stopPropagation();
    });​
});

フィドル

また、入力タグは自己終了であり、閉じる必要はありませんか?

于 2012-08-24T14:48:09.587 に答える
0

私によれば、これはより良いです：

$('div.tree div:has(div)').addClass('parent');
$('div.tree div').click(function( e ) {
    if ( !$(e.target).hasClass("parent") ) {
        return;
    }
    var o = $(this);
    o.children('div').toggle();
    o.children($(':radio')).attr('checked', true);
    o.filter('.parent').toggleClass('expanded');
    return false;
});

この方法では、イベントを 1 つ作成し、そのイベントのターゲットをチェックして、 というクラスがあるかどうかを確認するだけ.parentです。

于 2012-08-24T14:51:44.410 に答える