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

这样，您只需创建一个事件，然后检查该事件中的目标，看看它是否有一个名为.parent.

于 2012-08-24T14:51:44.410 回答