0

tr をクリックすると、非表示のコンテンツが展開され、slideToggle を実行しようとしています。現在、私がそれを行うと、シャッター/点滅、4回開閉します。私がやろうとしているのは、div#bounds を除くすべての子 (および関連付けにより、そのすべての子) がその onclick 属性を取得するようにすることです。

<tr id="attr_expander"><th>Alignment</th><td><input class="attribute" type ="text" disabled="true" />
    <div id="bounds">
       <label><input type="radio" name="toggle" value = "1"><span></span></label>
       <label><input type="radio" name="toggle" value="2"><span></span></label>
       <label><input type="radio" name="toggle" value = "4"><span></span></label><br />
       <label><input type="radio" name="toggle"value = "16"><span></span></label>
       <label><input type="radio" name="toggle"value = "32"><span></span></label>
       <label><input type="radio" name="toggle"value = "64"><span></span></label><br />
       <label><input type="radio" name="toggle"value = "256"><span></span></label>
       <label><input type="radio" name="toggle"value = "512"><span></span></label>
       <label><input type="radio" name="toggle"value = "1024"><span></span></label>
    </div>

』

jqueryは次のとおりです。

$("#attr_expander").find("*:not(div[id='bounds'])").click(function () {
    $("#bounds").slideToggle();
});

css を使用して見栄えを良くします。

#bounds {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#bounds label {
    float:left;
    width:2.25em;
    height:3.0em;
    border: 1px solid black;
}

#bounds label span {
    text-align:center;
    padding:3px 0px;
    display:block;

    width:2.25em;
    height:2.75em;
}

#bounds label span:hover
{
    background-color:Aqua;
    border: 1px solid black;
}

#bounds label input {
    position:absolute;
    top:-20px;
}

#bounds input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}​
4

3 に答える 3

0

要素にバインドしてから#bounds、親の 1 つであるかどうかを確認できます。このように、要素ごとに 1 つではなく、1 つのイベント リスナーのみをバインドします。

http://jsfiddle.net/G3tnQ/3/

$("#attr_expander").on('click', function (e) {
    var bounds = '#bounds',
        $target = $(e.target);

    if (!$target.is(bounds) && $target.closest(bounds).length === 0) {
        $(bounds).slideToggle();
    }
});​
于 2012-05-18T19:23:02.593 に答える
0 
$("#attr_expander").find('*').not('#bounds, #bounds *').click(function () {
    $("#bounds").slideToggle();
});

実施例

于 2012-05-18T18:55:08.080 に答える
0

クリック イベントのターゲットが何であるかを確認し、ノード名がテーブル セルである場合にのみトグルを実行できませんでしたか?

$("#attr_expander").click(function (e) {
    if((e.target.nodeName)=="TH" || (e.target.nodeName)=="TD") $("#bounds").slideToggle();
});​

jsFiddle の例。

于 2012-05-18T19:06:39.283 に答える